1.1.0 • Published 2 years ago
@bithero/react-datatable-bs v1.1.0
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. |