[](https://www.npmjs.com/package/react-datatable-ne)
npm install react-datatable-ne
pnpm, so the installation of Node.js in your IDE is required
pnpm you can run the following command line: npm install --global pnpm npm, the command line to run is: npm install --save react-datatable-ne --save-devdepending on the environment you want to use the library.
--save
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:
- Fork the Front-end repository
- 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 /*!`).