Easy-react-table-component

An easy-to-use and customizable React table component. Version: 1.1.1

Installation

• Installation via npm : npm install easy-react-table-component

• Import in a React file : import Table from 'easy-react-table-component';

Requirements

To display icons you need to install Font Awesome.

1. Got to Font Awesome

2. Create and install your Free kit in your HTML head

Props

| Name | Type | Description | Example | | ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | data | JSON | The JSON data that will be displayed in the table.The data will be flattened to be displayed in the table. | [{firstName: "Linda", lastName: "Randall", startDate: "2022/04/15", address: { street: "594th Hope Street", city: "Hatteras", state: "KS", zipCode: "35656" }, birthDate: "1994/12/10", department: "Human Ressources"}] | | listToDisplay | JSON | "JSON file specifying the elements of the JSON data to be displayed in the table."dataName" represents the name of the data, and "displayData" represents the column title." | [{ dataName: "firstName", displayName: "First Name" }] | | tableTitle | String | Table's Title | "Employees" | | researchBar | Boolean | true: displayed, false: hidden (default: true) | researchBar = {true} | | rowPagination | Number | Sets the default number of rows per page. (default: 10) | rowPagination={7} | | labelPerPage | String | Sets the default name of elements per page (default: "Elements") | labelPerPage={"Emplpoyees"} // "Employees per Pages |

Styling

You can change the style of the table by passing a class name using props that you will use with CSS/SASS

| Name | Type | Description | Example | | -------------------- | ------ | ---------------------------- | ------------------------------------------------- | | classHeader | String | Styling the header | classHeader = {"header"} | | classHeaderTitle | String | Styling the header title | classHeaderTitle = {"table-header-title"} | | classTableContainer | String | Styling the Table container | classTableContainer = {"table-table-container"} | | classTableHeader | String | Styling the Table header | classTableHeader = {"table-table-header"} | | classTableContent | String | Styling the Table content | classTableContent = {"table-table-content"} | | classTablePagination | String | Styling the Table pagination | classTablePagination = {"table-table-pagination"} | | classTableComponent | String | Styling the Table component | classTableComponent = {"table-table-component"} |

Repository

https://github.com/JohanHauteville/react-table-component

Changelog

• ver 1.0.2 : Fix React import
• ver 1.0.4 : Fix Table Length
• ver 1.0.5 : Fix research Bar error when there's no data
• ver 1.0.6 : Add Ramda Librairie to flatten data
• ver 1.0.7 : Fix error on flatten data
• ver 1.0.8 : Fix flatten data with mergeAll
• ver 1.0.9 : Fix error on empty data
• ver 1.1.0 : Update responsivity
• ver 1.1.1 : Update Documentation

Thanks for your support !