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

Documentation

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 (

);
};

```

$3

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

$3

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"|

Author

Arthur Blanc : GitHub - Portfolio