Nillys React Table Library (NRTL)

Nillys React Table Library (NRTL) is a customizable and easy-to-use React component for displaying data tables with features like sorting, pagination, and search. This library allows you to customize the table's styles and behavior to suit your needs.

!demo

Installation

To install this package, use npm:

``bash
npm install nillys-react-table-library
`

Usage

Here is a basic example of how to use the NRTL component in your React project:

`tsx
import React from 'react'
import { NRTL } from 'nillys-react-table-library'
import "nillys-react-table-library/style";

const App = () => {
const datas = {
tableHead: ['Name', 'Age', 'Profession'],
tableBody: [
['Alice', '30', 'Engineer'],
['Bob', '25', 'Designer'],
['Charlie', '35', 'Manager'],
],
}

return (


export default App
`

$3

The NRTL component comes with a wide range of customization options. Below is a list of available props with their default values.

| Prop | Type | Description | Default |
|--------------------------------|--------------------|--------------------------------------------------------------------------------------------|----------------------------------------------|
| datas | INRTL | The data for the table, containing tableHead (column titles) and tableBody (row data). | Required |
| headerBackgroundColor | string | Background color of the table header. | linear-gradient(to left, #d5e065, #a8c24e) |
| headerHoverBackgroundColor | string | Background color of the table header on hover. | #a8c24e |
| textColor | string | Color of the text inside the table. | #36395a |
| rowColor | string | Background color of the table rows. | #ffffff |
| rowHoverColor | string | Background color of the rows when hovered. | #36395a |
| hoverTextColor | string | Text color in the rows when hovered. | #ffffff |
| disabledButtonColor | string | Color of disabled buttons (pagination buttons, etc.). | #dcdcdc |
| columnSortingColor | string | Color of the sorting indicator chevron. | #dcdcdc |
| columnSortingFullFilledColor | string | Color of the chevron when a column is sorted. | #36395a |
| showSearchBar | boolean | Displays or hides the search bar above the table. | false |
| showItemsPerPageSelector | boolean | Displays or hides the items-per-page selector. | false |
| showPagination | boolean | Displays or hides pagination controls. | false |
| showPreviousNextButtons | boolean | Displays or hides the previous/next buttons in pagination. | false |
| enableColumnSorting | boolean | Enables or disables sorting by column. | false |
| itemsPerPageOptions | number[] | Array of options for the number of items per page. | [25, 50, 100] |
| language | En Fr string | Language of table elements. | En |

$3

The datas prop expects an object of type INRTL, which contains the table header and body data.

`typescript
interface INRTL {
tableHead: string[] // The column headers
tableBody: string[][] // The table rows as arrays of strings
}
`

Example:

`json
{
"tableHead": ["Name", "Age", "Profession"],
"tableBody": [
["Alice", "30", "Engineer"],
["Bob", "25", "Designer"],
["Charlie", "35", "Manager"]
]
}
`

$3

Here's an example that showcases more customization options:

`tsx
import React from 'react'
import { NRTL } from 'nillys-react-table-library'
import "nillys-react-table-library/style";

const App = () => {
const datas = {
tableHead: ['Name', 'Age', 'Profession'],
tableBody: [
['Alice', '30', 'Engineer'],
['Bob', '25', 'Designer'],
['Charlie', '35', 'Manager'],
],
}

return (


export default App
``

License

This project is licensed under the NRTL-NonCommercial license. You are free to use, modify, and distribute this project for internal, non-commercial purposes. Please read the LICENSE.md file for more details.