Pagination

The <Table /> component natively supports pagination via the PaginationConfig prop.

PageSelector.tsx

function PageSelector(props: PageSelectorRendererProps) {
    return (
        <div className='flex justify-end mt-5'>
            {Array(props.nPages)
                .fill(0)
                .map((_, i) => (
                    <div
                        key={i}
                        onClick={() => props.setPage(i)}
                        className={`items-center font-bold cursor-pointer px-4 py-2 border
                        text-sm hover:bg-gray-50 
                            ${
                                props.currentPage === i
                                    ? 'border-violet-800 text-violet-800 z-10'
                                    : 'border-gray-200 text-gray-500'
                            } `}>
                        {i}
                    </div>
                ))}
        </div>
    );

PaginationTable.tsx

function ResponsivenessTable() {
    return (
        <Table<Person>
            indexKey='id'
            data={people}
            columnConfigs={peopleColumns}
            baseHeaderClasses='font-bold'
            baseRowClasses={index => {
                let baseClasses = 'cursor-pointer';
                return index % 2 !== 0 ? baseClasses : `${baseClasses} bg-gray-100 dark:bg-stripe`;
            }}
            baseCellPadding={{
                vertical: '10px',
                horizontal: '10px'
            }}
            paginationConfig={{
                entryPerPage: 5,
                renderer: PageSelector
            }}
        />
    );
}

columns.ts

export const peopleColumns: ColumnConfig<Person>[] = [
    { title: 'Id', key: 'id', flex: 0.5 },
    { title: 'Last name', key: 'about.lastName' },
    { title: 'Age', key: 'about.age', flex: 0.5 },
    { title: 'Job', key: 'about.job', flex: 1.5 },
    { title: 'Company', key: 'company', flex: 1.5 }
];

Live example

info

The <Table /> component can sort data only if they are already available. If, on the other hand, the source is already paginated, retables can't infer the complete data set and it would therefore be impossible to indicate the number of page or apply sorting rules.

If you happen to be in this situation, you'll need to build yourself an external paging system.