Table

1
import {
2
    BlankSlate,
3
    Box,
4
    Button,
5
    ColumnDef,
6
    createColumnHelper,
7
    DateRangePickerPreset,
8
    Table,
9
    Title,
10
    useTable,
11
} from '@coveord/plasma-mantine';
12
import {EditSize16Px} from '@coveord/plasma-react-icons';
13
import {FunctionComponent, useState} from 'react';
14

15
interface IExampleRowData {
16
    userId: number;
17
    id: number;
18
    title: string;
19
    body: string;
20
}
21

22
export default () => {
23
    const columnHelper = createColumnHelper<IExampleRowData>();
24
    const columns: Array<ColumnDef<IExampleRowData>> = [
25
        columnHelper.accessor('userId', {
26
            header: 'User ID',
27
            cell: (info) => info.row.original.userId,
28
        }),
29
        columnHelper.accessor('id', {
30
            header: 'Post ID',
31
            cell: (info) => info.row.original.id,
32
        }),
33
        columnHelper.accessor('title', {
34
            header: 'Title',
35
            cell: (info) => info.row.original.title,
36
        }),
37
        Table.CollapsibleColumn as ColumnDef<IExampleRowData>,
38
    ];
39
    const [data, setData] = useState([]);
40
    const [loading, setLoading] = useState(false);
41
    const [pages, setPages] = useState(1);
42

43
    const fetchData = (state: any) => {
44
        setLoading(true);
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,
52
        });
53
        if (state.predicates.user === '') {
54
            searchParams.delete('userId');
55
        }
56
        if (!state.globalFilter) {
57
            searchParams.delete('title_like');
58
        }
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));
64
        setLoading(false);
65
    };
66

67
    return (
68
        <Table
69
            data={data}
70
            getRowId={({id}) => id.toString()}
71
            columns={columns}
72
            noDataChildren={<NoData />}
73
            onMount={(state) => {
74
                fetchData(state);
75
            }}
76
            onChange={(state) => {
77
                fetchData(state);
78
            }}
79
            loading={loading}
80
            initialState={{dateRange: [previousDay, today], predicates: {user: ''}}}
81
            getExpandChildren={(datum) => <Box py="xs">{datum.body}</Box>}
82
        >
83
            {/* you can override background color with: sx={{backgroundColor: 'white'}} for Header and Footer */}
84
            <Table.Header>
85
                <Table.Actions>{(datum: IExampleRowData) => <TableActions datum={datum} />}</Table.Actions>
86
                <UserPredicate />
87
                <Table.Filter placeholder="Search posts by title" />
88
                <Table.DateRangePicker presets={DatePickerPresets} />
89
            </Table.Header>
90
            <Table.Footer>
91
                <Table.PerPage />
92
                <Table.Pagination totalPages={pages} />
93
            </Table.Footer>
94
        </Table>
95
    );
96
};
97

98
const NoData: FunctionComponent = () => {
99
    const {state, form, clearFilters} = useTable();
100
    const isFiltered = !!state.globalFilter || !!form.values.predicates.user;
101

102
    return isFiltered ? (
103
        <BlankSlate>
104
            <Title order={4}>No data found for those filters</Title>
105
            <Button onClick={clearFilters}>Clear filters</Button>
106
        </BlankSlate>
107
    ) : (
108
        <BlankSlate>
109
            <Title order={4}>No Data</Title>
110
        </BlankSlate>
111
    );
112
};
113

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));
118

119
const DatePickerPresets: Record<string, DateRangePickerPreset> = {
120
    lastDay: {label: 'Last 24 hours', range: [previousDay, today]},
121
    lastWeek: {label: 'Last week', range: [previousWeek, today]},
122
};
123

124
const TableActions: FunctionComponent<{datum: IExampleRowData}> = ({datum}) => {
125
    const actionCondition = datum.id % 2 === 0 ? true : false;
126
    const pressedAction = () => alert('Edit action is triggered!');
127
    return (
128
        <>
129
            {actionCondition ? (
130
                <Button variant="subtle" onClick={pressedAction} leftIcon={<EditSize16Px height={16} />}>
131
                    Edit
132
                </Button>
133
            ) : null}
134
        </>
135
    );
136
};
137

138
const UserPredicate: FunctionComponent = () => (
139
    <Table.Predicate
140
        id="user"
141
        label="User"
142
        data={[
143
            {
144
                value: '',
145
                label: 'All',
146
            },
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'},
157
        ]}
158
    />
159
);