Table

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

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

21
const columnHelper = createColumnHelper<IExampleRowData>();
22
const columns: Array<ColumnDef<IExampleRowData>> = [
23
    columnHelper.accessor('userId', {
24
        header: 'User ID',
25
        cell: (info) => info.row.original.userId,
26
        enableSorting: false,
27
    }),
28
    columnHelper.accessor('title', {
29
        header: 'Title',
30
        cell: (info) => info.row.original.title,
31
        enableSorting: false,
32
    }),
33
];
34

35
const Demo = () => {
36
    const [data, setData] = useState(null);
37
    const [loading, setLoading] = useState(true);
38
    const [pages, setPages] = useState(1);
39

40
    const fetchData: onTableChangeEvent<IExampleRowData> = async (state) => {
41
        setLoading(true);
42
        const searchParams = new URLSearchParams({
43
            _page: (state.pagination.pageIndex + 1).toString(),
44
            _limit: state.pagination.pageSize.toString(),
45
            title_like: state.globalFilter,
46
        });
47
        if (!state.globalFilter) {
48
            searchParams.delete('title_like');
49
        }
50
        try {
51
            const response = await fetch(`https://jsonplaceholder.typicode.com/posts?${searchParams.toString()}`);
52
            const body = await response.json();
53
            setData(body);
54
            setPages(Math.ceil(Number(response.headers.get('x-total-count')) / state.pagination?.pageSize));
55
        } catch (e) {
56
            console.error(e);
57
        } finally {
58
            setLoading(false);
59
        }
60
    };
61

62
    return (
63
        <Table<IExampleRowData>
64
            data={data}
65
            getRowId={({id}) => id.toString()}
66
            columns={columns}
67
            noDataChildren={<NoData />}
68
            onMount={fetchData}
69
            onChange={fetchData}
70
            loading={loading}
71
            onRowSelectionChange={(selectedRows) =>
72
                console.info(`Row selection changed, selected rows: ${selectedRows.map(({id}) => id).join(', ')}`)
73
            }
74
            multiRowSelectionEnabled
75
            initialState={{
76
                rowSelection: {
77
                    '1': {
78
                        userId: 1,
79
                        id: 1,
80
                        title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
81
                        body: 'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
82
                    },
83
                    '2': {
84
                        userId: 1,
85
                        id: 2,
86
                        title: 'qui est esse',
87
                        body: 'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla',
88
                    },
89
                },
90
            }}
91
        >
92
            <Table.Header>
93
                <Table.Actions>
94
                    {(selectedRows: IExampleRowData[]) => <TableActions data={selectedRows} />}
95
                </Table.Actions>
96
                <Table.Filter placeholder="Search posts by title" />
97
            </Table.Header>
98
            <Table.Footer>
99
                <Table.PerPage />
100
                <Table.Pagination totalPages={pages} />
101
            </Table.Footer>
102
        </Table>
103
    );
104
};
105
export default Demo;
106

107
const NoData: FunctionComponent = () => {
108
    const {isFiltered, clearFilters} = useTable();
109

110
    return isFiltered ? (
111
        <BlankSlate>
112
            <Title order={4}>No data found for those filters</Title>
113
            <Button onClick={clearFilters}>Clear filters</Button>
114
        </BlankSlate>
115
    ) : (
116
        <BlankSlate>
117
            <Title order={4}>No Data</Title>
118
        </BlankSlate>
119
    );
120
};
121

122
const TableActions: FunctionComponent<{data: IExampleRowData[]}> = ({data}) => {
123
    if (data.length === 1) {
124
        return (
125
            <Button
126
                variant="subtle"
127
                onClick={() => alert(`Action triggered on a single row: ${data[0].id}`)}
128
                leftIcon={<EditSize16Px height={16} />}
129
            >
130
                Single row action
131
            </Button>
132
        );
133
    }
134
    if (data.length > 1) {
135
        return (
136
            <Button
137
                variant="subtle"
138
                onClick={() => alert(`Bulk action triggered on multiple rows: ${data.map(({id}) => id).join(', ')}`)}
139
                leftIcon={<DeleteSize16Px height={16} />}
140
            >
141
                Bulk action
142
            </Button>
143
        );
144
    }
145

146
    return null;
147
};

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

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

20
const columnHelper = createColumnHelper<IExampleRowData>();
21
const columns: Array<ColumnDef<IExampleRowData>> = [
22
    columnHelper.accessor('userId', {
23
        header: 'User ID',
24
        cell: (info) => info.row.original.userId,
25
        enableSorting: false,
26
    }),
27
    columnHelper.accessor('title', {
28
        header: 'Title',
29
        cell: (info) => info.row.original.title,
30
        enableSorting: false,
31
    }),
32
];
33

34
const Demo = () => {
35
    const [data, setData] = useState(null);
36
    const [loading, setLoading] = useState(true);
37
    const [pages, setPages] = useState(1);
38

39
    const fetchData: onTableChangeEvent<IExampleRowData> = async (state) => {
40
        setLoading(true);
41
        const searchParams = new URLSearchParams({
42
            _page: (state.pagination.pageIndex + 1).toString(),
43
            _limit: state.pagination.pageSize.toString(),
44
            title_like: state.globalFilter,
45
        });
46
        if (!state.globalFilter) {
47
            searchParams.delete('title_like');
48
        }
49
        try {
50
            const response = await fetch(`https://jsonplaceholder.typicode.com/posts?${searchParams.toString()}`);
51
            const body = await response.json();
52
            setData(body);
53
            setPages(Math.ceil(Number(response.headers.get('x-total-count')) / state.pagination?.pageSize));
54
        } catch (e) {
55
            console.error(e);
56
        } finally {
57
            setLoading(false);
58
        }
59
    };
60

61
    return (
62
        <Table<IExampleRowData>
63
            data={data}
64
            getRowId={({id}) => id.toString()}
65
            columns={columns}
66
            noDataChildren={<NoData />}
67
            onMount={fetchData}
68
            onChange={fetchData}
69
            loading={loading}
70
            onRowSelectionChange={(selectedRows) =>
71
                console.info(`Row selection changed, selected rows: ${selectedRows.map(({id}) => id).join(', ')}`)
72
            }
73
            multiRowSelectionEnabled
74
            disableRowSelection
75
            initialState={{
76
                rowSelection: {
77
                    '1': {
78
                        userId: 1,
79
                        id: 1,
80
                        title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
81
                        body: 'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
82
                    },
83
                    '2': {
84
                        userId: 1,
85
                        id: 2,
86
                        title: 'qui est esse',
87
                        body: 'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla',
88
                    },
89
                },
90
            }}
91
        >
92
            <Table.Header>
93
                <Table.Filter placeholder="Search posts by title" />
94
            </Table.Header>
95
            <Table.Footer>
96
                <Table.PerPage />
97
                <Table.Pagination totalPages={pages} />
98
            </Table.Footer>
99
        </Table>
100
    );
101
};
102
export default Demo;
103

104
const NoData: FunctionComponent = () => {
105
    const {isFiltered, clearFilters} = useTable();
106

107
    return isFiltered ? (
108
        <BlankSlate>
109
            <Title order={4}>No data found for those filters</Title>
110
            <Button onClick={clearFilters}>Clear filters</Button>
111
        </BlankSlate>
112
    ) : (
113
        <BlankSlate>
114
            <Title order={4}>No Data</Title>
115
        </BlankSlate>
116
    );
117
};

1
import {
2
    ColumnDef,
3
    createColumnHelper,
4
    FilterFn,
5
    getFilteredRowModel,
6
    getPaginationRowModel,
7
    getSortedRowModel,
8
    Table,
9
    TableProps,
10
} from '@coveord/plasma-mantine';
11
import {faker} from '@faker-js/faker';
12
import {rankItem} from '@tanstack/match-sorter-utils';
13
import {useMemo} from 'react';
14

15
export type Person = {
16
    id: string;
17
    firstName: string;
18
    lastName: string;
19
    age: number;
20
};
21

22
const makeData = (len: number): Person[] =>
23
    Array(len)
24
        .fill(0)
25
        .map((a, index) => ({
26
            id: faker.datatype.uuid(),
27
            firstName: faker.name.firstName(),
28
            lastName: faker.name.lastName(),
29
            age: faker.datatype.number(40),
30
        }));
31

32
const fuzzyFilter: FilterFn<Person> = (row, columnId, value) => rankItem(row.getValue(columnId), value).passed;
33

34
const columnHelper = createColumnHelper<Person>();
35

36
const columns: Array<ColumnDef<Person>> = [
37
    columnHelper.accessor('firstName', {
38
        header: 'First name',
39
        cell: (info) => info.row.original.firstName,
40
    }),
41
    columnHelper.accessor('lastName', {
42
        header: 'Last name',
43
        cell: (info) => info.row.original.lastName,
44
    }),
45
    columnHelper.accessor('age', {
46
        header: 'Age',
47
        cell: (info) => info.row.original.age,
48
    }),
49
];
50

51
const options: TableProps<Person>['options'] = {
52
    globalFilterFn: fuzzyFilter,
53
    getFilteredRowModel: getFilteredRowModel(),
54
    getPaginationRowModel: getPaginationRowModel(),
55
    getSortedRowModel: getSortedRowModel(),
56
};
57

58
const Demo = () => {
59
    const data = useMemo(() => makeData(45), []);
60
    return (
61
        <Table
62
            data={data}
63
            columns={columns}
64
            options={options}
65
            initialState={{pagination: {pageSize: 5}}}
66
            getRowId={({id}) => id}
67
        >
68
            <Table.Header>
69
                <Table.Filter placeholder="Search" />
70
            </Table.Header>
71
            <Table.Footer>
72
                <Table.PerPage values={[5, 10, 25]} />
73
                <Table.Pagination totalPages={null} />
74
            </Table.Footer>
75
        </Table>
76
    );
77
};
78
export default Demo;

1
import {BlankSlate, Button, ColumnDef, createColumnHelper, Table, Title, useTable} from '@coveord/plasma-mantine';
2
import {NoContentSize32Px} from '@coveord/plasma-react-icons';
3

4
export type Person = {
5
    firstName: string;
6
    lastName: string;
7
    age: number;
8
};
9

10
const NoData = () => {
11
    const {isFiltered, clearFilters, state} = useTable();
12

13
    return isFiltered ? (
14
        <BlankSlate>
15
            <Title order={4}>No data found for filter "{state.globalFilter}"</Title>
16
            <Button onClick={clearFilters}>Clear filter</Button>
17
        </BlankSlate>
18
    ) : (
19
        <BlankSlate withBorder={false}>
20
            <NoContentSize32Px height={64} />
21
            <Title order={4}>Hello Empty State</Title>
22
        </BlankSlate>
23
    );
24
};
25

26
const Demo = () => (
27
    <Table
28
        data={[]}
29
        columns={columns}
30
        noDataChildren={<NoData />}
31
        initialState={{globalFilter: 'foo', pagination: {pageSize: 5}}}
32
    >
33
        <Table.Header>
34
            <Table.Filter placeholder="Search" />
35
        </Table.Header>
36
        <Table.Footer>
37
            <Table.PerPage values={[5, 10, 25]} />
38
            <Table.Pagination totalPages={null} />
39
        </Table.Footer>
40
    </Table>
41
);
42
export default Demo;
43

44
const columnHelper = createColumnHelper<Person>();
45

46
const columns: Array<ColumnDef<Person>> = [
47
    columnHelper.accessor('firstName', {
48
        header: 'First name',
49
        cell: (info) => info.row.original.firstName,
50
    }),
51
    columnHelper.accessor('lastName', {
52
        header: 'Last name',
53
        cell: (info) => info.row.original.lastName,
54
    }),
55
    columnHelper.accessor('age', {
56
        header: 'Age',
57
        cell: (info) => info.row.original.age,
58
    }),
59
];

1
import {ColumnDef, createColumnHelper, onTableChangeEvent, Table, useTable} from '@coveord/plasma-mantine';
2
import {FunctionComponent, useEffect, useState} from 'react';
3

4
interface PostData {
5
    id: number;
6
    title: string;
7
}
8

9
const columnHelper = createColumnHelper<PostData>();
10
const columns: Array<ColumnDef<PostData>> = [
11
    columnHelper.accessor('id', {
12
        header: 'Post ID',
13
        enableSorting: false,
14
    }),
15
    columnHelper.accessor('title', {
16
        header: 'Title',
17
        enableSorting: false,
18
    }),
19
];
20

21
const Demo = () => {
22
    const [data, setData] = useState(null);
23
    const [loading, setLoading] = useState(true);
24

25
    const fetchData: onTableChangeEvent<PostData> = async () => {
26
        setLoading(true);
27
        try {
28
            const response = await fetch('https://jsonplaceholder.typicode.com/posts');
29
            const body = await response.json();
30

31
            // slow down the fetch, to make the refresh more obvious
32
            await new Promise((resolve) => setTimeout(resolve, 1000));
33

34
            setData(body);
35
        } catch (e) {
36
            console.error(e);
37
        } finally {
38
            setLoading(false);
39
        }
40
    };
41

42
    return (
43
        <Table<PostData>
44
            data={data}
45
            getRowId={({id}) => id.toString()}
46
            columns={columns}
47
            onMount={fetchData}
48
            onChange={fetchData}
49
            loading={loading}
50
        >
51
            <Table.Consumer>
52
                {/* Refresh the component every 10s, look at your network tab to validate it works */}
53
                <IntervalRefresh every={10 * 1000} />
54
            </Table.Consumer>
55
        </Table>
56
    );
57
};
58
export default Demo;
59

60
const IntervalRefresh: FunctionComponent<{every: number}> = ({every}) => {
61
    const {onChange} = useTable();
62
    useEffect(() => {
63
        const timer = setInterval(() => onChange(), every);
64
        return () => clearInterval(timer);
65
    }, [every]);
66

67
    return null;
68
};