React Delta Table

!React
!TypeScript
!Visual Studio Code
!SASS
!Git

 

:checkered_flag: Requirements

 

React Data Table Component requires the following be installed in your project:

- React 16.8.0+
- React DOM 16.8.0+

If you're using Typescript:

- Typescript 4.7.3

 

:package: Installation

 

$3

``
npm install react-delta-table
`

$3

`
yarn add react-delta-table
`

 


:chart_with_upwards_trend: Features

 

- Pagination
- Search
- Display/hide columns
- Responsive
- Export to CSV/JSON

 

:camera: Check these link for a preview image

 



 

:rocket: How to use

 

$3

 

Import the DataTable from "react-delta-table". By default the table will set it width to 100%. Use a container if you want the table to use only a certain width.
 

Example :
 


`swift
import { createRoot } from 'react-dom/client';
import { DataTable } from 'react-delta-table';

const container = document.getElementById('root')
const root = createRoot(container)
root.render(



)
``
 

$3

 

headers: Array[string] required

An array of strings that includes all your headers. The order in your array will be the order oof your headers

 

rows: Array[Array[string]] required

An array of arrays of strings. Each array in this array will be a row in your table. In each of this array (row) there will be a cell value

 

itemPerPageRanges: Array[number] required

Each number will be a possible number of items per page that you will can select in the item per page select component of the table

 

labels: Object {
search: string,
display: string,
export: string,
first: string,
previous: string,
next: string,
last: string
} required

Object that contains all the value for the text labels of the table. Replace the string value with what you want instead

 

className string

A className attribut that will be include in first position of the higher component of the table HTML tree. Check the inspector for the html of the component for more details.

 

theme: "dark" | "light" required

Two default dark/light style for the table component