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

Author

Arthur Blanc : GitHub - Portfolio