react-datatable-bs

React component for a simple datatable with styles to match bootstrap

License

This project is licensed under AGPL-3.0. See the LICENSE file for more informations.

Usage

import { DataTable } from '@bithero/react-bs-datatable';

import 'bootstrap/dist/css/bootstrap.css';
import '@bithero/react-bs-datatable/dist/datatable.css';

const MyComponent = () => {

    const rows = [
        [ '1', 'John', '24' ],
        [ '2', 'Joe', '29' ],
        [ '3', 'Arthur', '18' ],
        [ '4', 'Bernd', '30' ],
        [ '5', 'Maria', '26' ],
        [ '6', 'Zoe', '19' ],
    ];

    return (
        <DataTable
            headings={['ID', 'Name', 'Age']}
            data={rows}
            pageingEntries={[5,10,15,20,25]}
            translations={{
                perPage: 'entries per page',
                searchPlaceholder: 'Search...',
                info: 'Showing {s} to {e} of {c} entries',
            }}
            sortable
        />
    );
}

Props

Prop | Type | Comment ----------------------------|---------------------------------------|------------------------------------------ headings | string[] | The labels to use as headings; also specfies how many columns there are data | string[][] | Array of rows which in turn are array of cells (strings). showAddBtn | boolean | Enables an add button in the upper right corner searchable | boolean | Enables searching of the table sortable | boolean | Enables sorting of columns pageingEntries | number[] | List of numbers that will be shown as selection in the 'entries per page' dropdown translations | IDataTableTranslations | Translations for the few strings in the component; see below onAddClick | (MouseEvent<>): void | Called when the add-button was clicked; see showAddBtn onRowClick | (row_idx, row, event): void | Called when an row is clicked onSearchNamespaceResolve | (namespace, row_idx, row): string | If specified, this function's result is used instead for namespace lookups for searches performed with @bithero/simple-search-lib.

IDataTableTranslations

Field | Type | Comment --------------------|-----------|---------------------- perPage | string | Text to display to the right of the 'entries per page' dropdown searchPlaceholder | string | Text to use as placeholder for the search input info | string | Layout string for the info bar at the bottom left. at the special symbols {s}, {e} and {c} the numbers for the start, the end and the overall count will be inserted respectively. noRows | string | Text to display if no data was provided via the data property. noResults | string | Text to display if there where no search results.