react-datatable-ne, simple and customizable table

React Typescript library enabling to enhance plain HTML tables with minimal effort.

1. Features

The library removes developers the hassle to build and style data representation with a table.

The main features are : sorting, paging and filtering the table.



It is developed with two distinct groups of users in mind:

* You the developers using react-datatable-ne. The package provides a wide array of options for how data should be obtained, displayed and acted upon, along with an extensive API for accessing and manipulating the table.

* End users. Your users will get an interface where actions to get the most from the information contained in tables, such as sorting, filtering and paging, are easy to use, intuitive and fast.

2. STACK TECHNIQUE

The project uses as its primarily building tools React and Typescript.

$3

• Node 16.20.0


• React ^18.2.0

$3

The library has some dependencies that will get automatically downloaded and listed in your package.json. The main ones are:

• typescript


• react-select


• styled-components

3. Installation

Firstly, the project uses Node packages and uses pnpm, so the installation of Node.js in your IDE is required
> Install Node.js


If you have not yet pnpm you can run the following command line:

npm install --global pnpm

⚠ Other options are available to install it, so feel free to use the one you are more comfortable with. ⚠




Then, use any package manager to install our package. With npm, the command line to run is:

npm install --save react-datatable-ne

Add the necessary flag arguments like --save-devdepending on the environment you want to use the library.
Most likely, you will need it for production as well so use --save

4. Usage

$3

To start using react-table-ne, import it in the component where the table must be displayed.
``js
import DisplayTable from 'react-datatable-ne'
`
And then you can integrate it with a single line of code:
`js

`
⚠ The library exports the component as the default value. So you can replace DisplayTable by any name you prefer. ⚠

$3

#### Mandatory
In order to work properly, the component DisplayTable must receive 2 arguments:
`js
data={data} // data that must be displayed in the table, i.e. the data that will populate the plain HTML tbody
columns={columns} // headers of the table, i.e. the row for plain HTML thead
/>
`

#### Optional
Optional configuration parameters can be passed to the component to have it perform certain actions.
Here are presented below all the available properties you can modify.

`js
data={data} // data that must be displayed in the table, i.e. the data that will populate the plain HTML tbody
columns={columns} // headers of the table, i.e. the row for plain HTML thead
initialSort={{ column: 'startDate', order: 'asc' }}, // to define if the table must display the data in a certain order at page load. The column property indicates on which column to sort and in which order. By default, no order is specified.
sortArrowsProps={{
ascending: {src: 'relative/path/to/image', alt: 'asc', style: {width: '50px'}},
descending: {src: 'relative/path/to/image', alt: 'desc', style: {width: '50px'}},
}}, // for attributes, only src and alt may be altered. For the style object, any CSS property natively used by the HTML img element can be passed in
entriesNumberOptionsProps={selectNativeProps: {options: [5, 10, 20}, showEntriesNumberText: 'Show', entriesUnits: 'units'}, // If specified, it will let the user chooses how many rows he wants the table to display (i.e. the table size). The selectNativeProps accepts any properties natively used by a plain HTML select.
showEntriesNumberText = 'Show', // the label text associated to the table size select dropdown
entriesUnits= 'entries', // the table size units label
isSearchable= false, // Indicates if the table can be filtered by the user from a search input. If set to true, then a search input will be displayed
fieldsSearched= [], // If you allow filtering the data, you might also want to specify which columns are concerned by the search
searchInputsProps={width: '2Opx'}, // any property natively used by the package react-select or the plain HTML select
searchOnFullWord= false, // Indicates if the research is of type keyword (i.e. for a field value, it will match the research only if it starts with the searched value) or the sole presence of the string in the field value is sufficient
searchLabel= 'Search', // the label for the search input
isPaginable= false, // Indicates if the user is allowed to paginate
pagesNumberVisible= false, // If pagination is allowed, then most likely there are different pages. This indicates if the number of these pages must be shown to the user or not
paginateArrowProps=, // any property natived used by HTML img
textForDataNull= 'There is no data yet', // text to display if there is no data
textForDataFilteredNull= 'There are o results from your search', // text to display if the research didn't get any results
/>
`
We have not precised the type for each of these props. However, our package is typed so you will be able to see the types of each of them.





#### Types
The packages exposes 4 types that you can import like this:
`js
import { TableColumn, OptionValue, DataRow, DataRows } from 'react-datatable-ne'
`

TableColumn represents a table header row
`js
type TableColumn = {
label: string // Title of the column displayed to the user
accessor: string // Value to access the row (acts like the it)
sortable: boolean // Indicates if the table can be sorted by this column or not
}
`



OptionValue simply represents an option for a select dropdown.
`js
type OptionValue = {
value: string // Value of the option
label: string // Text displayed to the user
}
`



DataRow represents a table body row
`js
type DataRow = {
[key: string]: any // Key should be one of your table header title
}
`



DataRows is self-explanatory, it corresponds to a table body
`js
type DataRows = DataRow[]
`

5. Contribution

Although as it stands, this library does the job, offering enough flexibility and simplicity to the developpers, any participation on this project is more than welcome.

If you want to work and propose improvements:

1. Fork the Front-end repository


2. Clone it locally using git clone

The project uses Node packages. So the installation of Node.js in your IDE is required
> Install Node.js
For Node packages manager, yarn is being used. To install it, run the command line:
npm install --global yarn

License

DataTables is release under the MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact (specifically the comment block which starts with /*!`).