Paginated Tables for React

This mini-project was born simply because I found myself rewriting this functionality. It provides simple pagination, filtering and sorting of tabulated data. It is very simple to use; please see the example below. Feel free to use, copy, change as you see fit.

Simple Usage

import { PaginatedTable } from 'paginated-table-gl';

const TestPage = (props) => {

    // this would normally come from a database,
    // we'll use this for testing...
    const data = [
        {
            name: "Mr. Test",
            description: "This is Mr. Test."
        }, 
        {
            name: "Mrs. Test",
            description: "This is Mrs Test."
        }, 
        {
            name: "Big Dave",
            description: "This is big Dave"
        }
    ];

    // this is what we do when the "View" button is clicked
    // in the table (see _actions property in tableData)
    const doView = (person) => {
        console.log(person);
    }

    // we prepare the data so it is in a format suitable
    // for reading. the _actions property accepts an array
    // of objects with name and onClick properties.
    const tableData = data.map(d => ({
        ...d,
        _actions: [
            {
                name: 'view',
                onClick: () => doView(d)
            }
        ]
    }));

    // we prepare the rest of the props the PaginatedTable needs
    const columns = ['name', 'description', '_actions']
    const columnTitles = ['Name', 'Description', 'Actions'];
    const filterableColumns = ['name'];
    const sortableColumns = ['name'];

    return (
        <>
            <h1>Paginated Table Example</h1>
            <PaginatedTable
                data={tableData}
                columns={columns}
                columnTitles={columnTitles}
                filterableColumns={filterableColumns}
                sortableColumns={sortableColumns}
                recordsPerPage={10}
            />
        </>
    )
}

export default TestPage;

Props

data

An array of objects to be displayed in the table. The table will paginate them according to the recordsPerPage prop (see later). Note that the _actions property is a special property which is interpreted by the module, and used to create actions. It is an array of objects with properties name and onClick. name is the label which is displayed on the button, onClick is the function that is executed when the button is clicked. You can pass the entire record to the function if necessary. Each object in the _actions array will create a button in the same table cell.

columns

An array of strings containing the properties of the data items to be displayed in the table. The columns are displyed in the order in which they appear in this array

columnTitles

An array of strings containing the "friendly" name of the column. This name will be used as the column label. This array must be the same length as the columns array. If you don't want a column to have a title, use an empty string.

filterableColumns

An array of strings containing the properties of the data items which can be used to filter the data in the table. This creates a field in the thead which can be used to filter on the data in that column. Multiple filters can be applied.

sortableColumns

An array of strings containing the properties of the data items which can be used to sort the data in the table. This adds an icon after the column title, which is clickable. It will order first in Ascending order, then in Decending order, and then will revert back to the original order. Multiple columns can be sorted.

recordsPerPage

The number of records to be shown on one page of the table. The table will paginate based on this number. Example: if you pass 75 data items to the table, with recordsPerPage = 20, there will be 4 pages in the table: records 1-20, 21-40, 41-60, 61-75.

className

Allows you to override the default CSS class (you can find the stylesheet in node_modules/paginated-table-gl/components/paginatedTable.css). You can make a copy of these styles and override them in your own stylesheets. By default the assigned className is "paginated-table", which is managed in the aforementioned stylesheet.

Notes

This package is provided completely as-is, with no guarantees at all. I work full time, so I also give no guarantees for bug-fixes or new features. It is likely that the evolution of this project will follow the evolution of my own personal projects (ie: no deadlines, best effort).