react-datatable-ne v1.0.4

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.

2.1 Frameworks

2.2 Dependencies

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

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

4.1 Import

To start using react-table-ne, import it in the component where the table must be displayed.

import DisplayTable from 'react-datatable-ne'

And then you can integrate it with a single line of code:

<DisplayTable data={data} columns={columns} />

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

4.2. Parameters

Mandatory

In order to work properly, the component DisplayTable must receive 2 arguments:

<DisplayTable d
  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.

<DisplayTable
  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:

import { TableColumn, OptionValue, DataRow, DataRows } from 'react-datatable-ne'

TableColumn represents a table header row

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.

type OptionValue = {
  value: string // Value of the option
  label: string // Text displayed to the user 
}

DataRow represents a table body row

type DataRow = {
  [key: string]: any // Key should be one of your table header title
}

DataRows is self-explanatory, it corresponds to a table body

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:

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 /*!).