! Note: This project is not ready for production use. !

Introduction

DataTable is a simple table component for React with search, pagination, and ordering features.

Installation

npm i @lehmax/datatable

yarn add @lehmax/datatable

pnpm add @lehmax/datatable

Usage

import DataTable from "@lehmax/datatable";

<DataTable
  title="Employees"
  data={[
    { column1: "value1", column2: "value2", ... },
    ...
  ]}
  columns={[
    { id: "column1", label: "Column 1", ... },
    ...
  ]}
  searchColumns={["column1", ...]}
/>;

import DataTable from "@lehmax/datatable";

<DataTable
  title="Employees"
  data={[
    { column1: "value1", column2: "value2", ... },
    ...
  ]}
  columns={[
    { id: "column1", label: "Column 1", ... },
    ...
  ]}
  searchColumns={["column1", ...]}
  search={false}
  paginate={false}
  ordering={false}
/>;

Props

| Property | Type |Default | Required | Description | |--------------------|--------------------|------------------|--------------|-------------------------------------------------------------------------------------------| | title | string | | No | The title of the data table. | | data | array of objects | | Yes | The data to display in the table. Each object should have an id field and dynamic keys. | | data[].id | string | | Yes | The unique identifier for each data entry. | | | columns | array of objects | | Yes | The columns to display in the table. Each object should have a label and an id. | | columns[].label | string | | Yes | The label of the column to display in the table header. | | columns[].id | string | | Yes | The identifier corresponding to the key in the data object. | | searchColumns | string[] or "all" | "all" | No | The columns to search on. "all" searches across all columns. | | ordering | boolean | true | No | If true, enables column sorting. | | search | boolean | true | No | If true, enables search functionality in the table. | | paginate | boolean | true | No | If true, enables pagination of the data in the table. | | entriesPerPage | number | 10 | No | Number of entries per page if pagination is enabled. |

License

MIT Licensed.

inspired by DataTables