How to add pagination to grommet datatable

Question

I just took the example of https://v2.grommet.io/datatable and extended it with the pagination attribute, but this has no effect and the table doesn't change.

         <DataTable
                    columns={[
                        {
                            property: 'name',
                            header: <Text>Name</Text>,
                            primary: true,
                        },
                        {
                            property: 'percent',
                            header: 'Complete',
                            
                            render: datum => (
                                <Box pad={{ vertical: 'xsmall' }}>
                                    <Meter
                                        values={[{ value: datum.percent }]}
                                        thickness="small"
                                        size="small"
                                    />
                                </Box>
                            ),
                        },
                    ]}
                    data={[
                        { name: 'Alan', percent: 20 },
                        { name: 'Bryan', percent: 30 },
                        { name: 'Chris', percent: 40 },
                        { name: 'Eric', percent: 80 },
                    ]}
                    step={2}
                    paginate={true}
                />

score 1 · Accepted Answer · answered Mar 23 '21 at 04:43

The Pagination component and features are only available starting grommet v2.17.0 (which was released less than 30 minutes ago :) ) Go to your package.json, upgrade grommet to use grommet v2.17.0, install dependencies and the example you have shared should work without a problem, good luck.

How to add pagination to grommet datatable

1 Answers1