# react-ab-data-table

> React AB Data Table

Latest version **0.0.6** (published 2022-09-30) · 0 weekly downloads

## Install

```sh
npm install react-ab-data-table
pnpm add react-ab-data-table
yarn add react-ab-data-table
bun add react-ab-data-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2022-09-30 |
| First published | 2022-09-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 524.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Arthur BLANC |
| Maintainers | loweezy |
| Keywords | table, react |

## Links

- npm: https://www.npmjs.com/package/react-ab-data-table
- npm.io page: https://npm.io/package/react-ab-data-table

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.0.6 (latest) — 2022-09-30
- 0.0.5 — 2022-09-08
- 0.0.4 — 2022-09-08
- 0.0.3 — 2022-09-07
- 0.0.2 — 2022-09-07
- 0.0.1 — 2022-09-07

## README

# 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](https://arthurblanc.github.io/react-ab-data-table/)

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

## Author
**Arthur Blanc** : [**GitHub**](https://github.com/ArthurBlanc/) - [**Portfolio**](https://abcoding.fr/)

---
_Source: https://npm.io/package/react-ab-data-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._