11
} from '@coveord/plasma-mantine';
12
import {EditSize16Px} from '@coveord/plasma-react-icons';
13
import {FunctionComponent, useState} from 'react';
15
interface IExampleRowData {
23
const columnHelper = createColumnHelper<IExampleRowData>();
24
const columns: Array<ColumnDef<IExampleRowData>> = [
25
columnHelper.accessor('userId', {
27
cell: (info) => info.row.original.userId,
29
columnHelper.accessor('id', {
31
cell: (info) => info.row.original.id,
33
columnHelper.accessor('title', {
35
cell: (info) => info.row.original.title,
37
Table.CollapsibleColumn as ColumnDef<IExampleRowData>,
39
const [data, setData] = useState([]);
40
const [loading, setLoading] = useState(false);
41
const [pages, setPages] = useState(1);
43
const fetchData = (state: any) => {
45
const searchParams = new URLSearchParams({
46
_sort: state.sorting?.[0]?.id ?? 'userId',
47
_order: state.sorting?.[0]?.desc ? 'desc' : 'asc',
48
_page: state.pagination.pageIndex + 1,
49
_limit: state.pagination.pageSize,
50
userId: state.predicates.user,
51
title_like: state.globalFilter,
53
if (state.predicates.user === '') {
54
searchParams.delete('userId');
56
if (!state.globalFilter) {
57
searchParams.delete('title_like');
59
fetch(`https://jsonplaceholder.typicode.com/posts?${searchParams.toString()}`)
60
.then((response) => response.json())
61
.then((json) => setData(json))
62
.then(() => setPages(Math.ceil(100 / state.pagination?.pageSize)))
63
.catch((e) => console.log(e));
70
getRowId={({id}) => id.toString()}
72
noDataChildren={<NoData />}
76
onChange={(state) => {
80
initialState={{dateRange: [previousDay, today], predicates: {user: ''}}}
81
getExpandChildren={(datum) => <Box py="xs">{datum.body}</Box>}
85
<Table.Actions>{(datum: IExampleRowData) => <TableActions datum={datum} />}</Table.Actions>
87
<Table.Filter placeholder="Search posts by title" />
88
<Table.DateRangePicker presets={DatePickerPresets} />
92
<Table.Pagination totalPages={pages} />
98
const NoData: FunctionComponent = () => {
99
const {state, form, clearFilters} = useTable();
100
const isFiltered = !!state.globalFilter || !!form.values.predicates.user;
102
return isFiltered ? (
104
<Title order={4}>No data found for those filters</Title>
105
<Button onClick={clearFilters}>Clear filters</Button>
109
<Title order={4}>No Data</Title>
114
const today: Date = new Date();
115
const previous: Date = new Date(new Date().getTime());
116
const previousDay: Date = new Date(previous.setDate(previous.getDate() - 1));
117
const previousWeek: Date = new Date(previous.setDate(previous.getDate() - 7));
119
const DatePickerPresets: Record<string, DateRangePickerPreset> = {
120
lastDay: {label: 'Last 24 hours', range: [previousDay, today]},
121
lastWeek: {label: 'Last week', range: [previousWeek, today]},
124
const TableActions: FunctionComponent<{datum: IExampleRowData}> = ({datum}) => {
125
const actionCondition = datum.id % 2 === 0 ? true : false;
126
const pressedAction = () => alert('Edit action is triggered!');
130
<Button variant="subtle" onClick={pressedAction} leftIcon={<EditSize16Px height={16} />}>
138
const UserPredicate: FunctionComponent = () => (
147
{value: '1', label: '1'},
148
{value: '2', label: '2'},
149
{value: '3', label: '3'},
150
{value: '4', label: '4'},
151
{value: '5', label: '5'},
152
{value: '6', label: '6'},
153
{value: '7', label: '7'},
154
{value: '8', label: '8'},
155
{value: '9', label: '9'},
156
{value: '10', label: '10'},