@lehmax/datatable NPM

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