0.0.6 • Published 2 years ago
react-ab-data-table v0.0.6
react-ab-dataTable
Was made for a student projet for OpenClassrooms.
This library is a react component to render a table using two arrays of objects.
The table can be sorted, filtered (using a search input), paginated and the number of row can be change (all can be disable).
Installation
Run the following command:
# If you use npm:
npm install react-ab-data-table
# If you use yarn:
yarn add react-ab-data-table
Usage
import { DataTable } from "react-ab-data-table";
const App = () => {
const columns = [
{ name: "First Name", id: "firstName", sortable: true },
{ name: "Last Name", id: "lastName", sortable: true },
{ name: "City", id: "city", sortable: true },
{ name: "Birthday", id: "birthday", sortable: true },
];
const data = [
{ firstName: "John", lastName: "Doe", city: "New York", birthday: "1980-01-02" },
{ firstName: "Jane", lastName: "Doe", city: "Los Angeles", birthday: "1985-02-14" },
{ firstName: "John", lastName: "Smith", city: "Chicago", birthday: "1970-11-22" },
{ firstName: "Jane", lastName: "Smith", city: "Houston", birthday: "1975-09-30" },
];
return (
<main>
<DataTable columns={columns} data={data} tableId="employee" sortId="lastName" />
</main>
);
};
Columns array
This array is use to render the head columns
- name: the name of the column displayed in the table header
- id: the id of the column
- sortable: boolean, if the column is sortable
- headColSpan: size of the column in the header bodyColSpan: size of the column in the body
Data array
This array must contain the data of the table, every object will be a row.
The key must be the id of the column and the value will be the data in the row/column.
Props list
Name | Type | Required | Description | Default |
---|---|---|---|---|
data | arrayOf | Yes | The data to be displayed in the table | |
columns | arrayOf | Yes | The columns to be displayed in the table | |
tableId | string | Yes | The id of the table | |
sortId | string | No | The id of the column to be sorted | function() |
itemsPerPageOptions | array | No | The options for the items per page dropdown | 10, 25, 50, 100 |
itemsPerPageSelectionEnabled | bool | No | Whether the items per page dropdown should be enabled | true |
searchEnabled | bool | No | Whether the search input should be enabled | true |
sortSelectionEnabled | bool | No | Whether the sort dropdown should be enabled | true |
tableInfoEnabled | bool | No | Whether the table info should be enabled | true |
paginationEnabled | bool | No | Whether the pagination should be enabled | true |
dataTablesWrapperClassName | string | No | The class name of the wrapper div | "data-tables-wrapper" |
dataTablesLengthClassName | string | No | The class name of the length div | "data-tables-length" |
dataTablesLengthLabelClassName | string | No | The class name of the length label | "data-tables-length-label" |
dataTablesLengthSelectClassName | string | No | The class name of the length select | "data-tables-length-select" |
dataTablesLengthOptionClassName | string | No | The class name of the length options | "data-tables-length-option" |
dataTablesSearchWrapperClassName | string | No | The class name of the search wrapper div | "data-tables-search-wrapper" |
dataTablesSearchLabelClassName | string | No | The class name of the search label | "form-label" |
dataTablesSearchInputClassName | string | No | The class name of the search input | "form-input" |
dataTablesInfoClassName | string | No | The class name of the info div | "data-tables-info" |
dataTablesPaginateClassName | string | No | The class name of the paginate div | "data-tables-paginate" |
dataTableClassName | string | No | The class name of the table | "data-table" |
dataTableHeaderClassName | string | No | The class name of the table header | "data-table-header" |
dataTableHeaderTrClassName | string | No | The class name of the table header tr | "data-table-header-tr" |
dataTableHeaderThClassName | string | No | The class name of the table header th | "data-table-header-th" |
dataTableHeaderSortedClassName | string | No | The class name of the table header th sorted | "sorting" |
dataTableBodyClassName | string | No | The class name of the table body | "data-table-body" |
dataTableBodyTrClassName | string | No | The class name of the table body tr | "data-table-body-tr" |
dataTableBodyTdClassName | string | No | The class name of the table body td | "data-table-body-td" |
dataTableBodyTdSortedClassName | string | No | The class name of the table body td sorted | "sorting_1" |
dataTableBodyTdEmptyClassName | string | No | The class name of the table body td empty | "data-tables-empty" |
dataTableBodyOddRowClassName | string | No | The class name of the table body tr odd | "odd" |
dataTableBodyEvenRowClassName | string | No | The class name of the table body tr even | "even" |