1.0.2 • Published 2 years ago
open-classrooms-p14-data-table-library v1.0.2
open-classrooms-p14-data-table-library
1. About
This is a React component to display data in the form of a table.
2. Functionalities
- Selectable number of entries shown per page.
- Search functionality to display only data matching your search.
- Sort every column in ascending or descending order (works with dates and numbers too)
- Multiple page table
- Fully customisable CSS file included
3. Install
npm install open-classrooms-p14-data-table-library
4. Use case
Further explanation in section 5.
import { DataTable } from "open-classrooms-p14-data-table-library";
import "open-classrooms-p14-data-table-library/dist/index.css";
export default function EmployeeList(){
const data = [
{
name: "John Doe",
dateStarted: "04/17/2015",
age: 28
},
{
name: "Tony Stark",
dateStarted: "06/24/2018",
age: 37
}
]
const tableHeaders = [
{
header: "Name",
dataKey: "name"
}
{
header: "Date Started",
dataKey: "dateStarted",
isDate: true
}
{
header: "Age",
dataKey: "age"
}
]
const entriesPerPage = [5,10,25,50,100]
return(
<DataTable data={data} tableHeaders={tableHeaders} entriesPerPage={entriesPerPage} />
)
}
5. Properties
NOTE:
All 3 properties are compulsory for the table to work properly
5.1 {data}
- An
Array
ofObjects
where each object represents a row on the table. - The objects doesn't need to be organised and trimmed down since the table will be generated using the tableHeaders array instead.
- That said keep in mind that less unused data sent to the table means faster table rendering.
5.2 {tableHeaders}
- An
Array
ofObjects
where each object represents the header for each collumn. - This array must be in the
order
in which you desire the collumns to be generated. - Make sure that the values of
dataKey
is identical to the keys of {data}. - For
dates
to be sorted correctly: AddisDate: true
. - Dates should be sent in standard American format
mm/dd/yyyy
, also obtained withexampleDate.toLocaleDateString()
.
5.3 {entriesPerPage}
- An
Array
ofNumbers
where each number represents how many rows of data to display per table page. - This array will customize the "show entries" dropdown.
6. Customization
- To customize the appearance simply copy the css code from
open-classrooms-p14-data-table-library/dist/index.css
inside thenode_modules
folder and paste it into your own css file. - You are now free to change the appearance at will.
- Don't forget to
not
import the integrated css if you wish to use custom css