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.

Installation

npm install paginated-table-gl

Changes compared to version 1.x

This is version 2.x, which is not compatible with 1.x versions. The main change is that the columns prop now contains all the metadata required to manage how the data is rendered. This allows greater flexibility, particularly in customising the look and feel of the table. Each data element can be styled individually. It is also possible to pass JSX fragments to the table in order to render more complex objects.

The columns prop now takes an array of objects:

const columns = [
    {
        name: 'first_name',
        title: 'First Name',
        sortable: true,
        filterable: true,
        header:
            {
                style: {width: '30%'},
                className: 'myColumn'
            },
        body:
            {
                style: {backgroundColor: 'pink'},
                className: 'myCell'
            }
    },
    ...
];

Example 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.",
            isActive: true
        },
        {
            name: "Mrs. Test",
            description: "This is Mrs Test.",
            isActive: true
        },
        {
            name: "Big Dave",
            description: "This is big Dave",
            isActive: false
        }
    ];

    // 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);
    }

    // this function is called when the checkbox is changed
    const toggleActive = (person) => {
      person.isActive = !person.isActive;
    }

    // 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.

    // we can also pass JSX fragments to render more complex objects
    const tableData = data.map(d => ({
        name: d.name.toUpperCase(),
        description: d.description,
        isActive: <input type="checkbox" name={d.name} checked={d.isActive} onChange={() => toggleActive(d)} />,
        _actions: [
            {
                name: 'view',
                onClick: () => doView(d)
            }
        ]
    }));

    // we prepare the rest of the props the PaginatedTable needs
    const columns = [
        {
            name: 'name',
            title: 'Name',
            sortable: true,
            filterable: true,
            headers: {
                style: {backgroundColor: 'pink'}
            }
        },
        {
            name: 'description',
            title: 'Description',
            body: {
                className: 'descriptionCell'
            }
        },
        {
            name: 'isActive',
            title: 'Active'
        },
        {
            name: '_actions',
            title: 'Actions'
        }
    ]

    return (
        <>
            <h1>Paginated Table Example</h1>
            <PaginatedTable
                data={tableData}
                columns={columns}
                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 objects containing metadata to describe the column.

const columns = [
    {
        name: 'first_name',
        title: 'First Name,
        sortable: true,
        filterable: true,
        header:
            {
                style: {width: "30%"},
                className: "myColumn"
            },
        body:
            {
                style: {backgroundColor: pink},
                className: "myCell"
            }
    },
    ...
];

All properties are optional apart from name which must correspond to a property on the object being displayed. In the absence of a title, the name will be used as the column title. if title is an empty string, the column will have no title.

recordsPerPage

A positive integer which sets how many records are show on each page of the table.

baseClass

A css class which will be assigned to the <table> HTML element. The class substitutes the default paginated-table.

noDataMessage

The message to be displayed when no data is present in the table. defaults to "No Data Found".

currentPage

Allows manually setting the page number to display in the table (useful if you need someone to navigate directly to a particular page of the table, for saved searches etc.)