datatable-react-lib v1.0.0

datatable-react-lib

A library of react components created to enhance tables. It add search, sorting, paging and entries per page features.

Installing datatable-react-lib

To install the library in your react project, run the following command:

npm install datatable-react-lib

Usage

You can use 4 components: <DataTable/>, <Pagination/>, <EntriesPerPage /> and <Search/>. Each components is managed with props and states that you will have to declare in your parent component:

const { data, setData } =  useContext(data);
const [numberOfEntriesToShow, setNumberOfEntriesToShow] =  useState(10);
const [rangeFrom, setRangeFrom] =  useState(0);
const [rangeTo, setRangeTo] =  useState(numberOfEntriesToShow -  1);
const [notFilteredData] =  useState(data);

• data: your array of data.
• numberOfEntriesToShow: the number of entries you want to show on each page
• setData: used to filter data with <Search />
• rangeFrom, rangeTo: set the min and max index of your array you want to display (ex: index from 0 to 9 for the first page).
• notFilteredData: a copy of your data that will never be changed

DataTable

This component is used to create the main table. You will have to add 4 props in order to make your table:

<DataTable
    data={data}
    rangeFrom={rangeFrom}
    rangeTo={rangeTo}
    notFilteredData={notFilteredData}>
</DataTable>

EntriesPerPage

This component is used to show the number of entries you have on each page. You will have to add 1 prop:

<EntriesPerPage
	setNumberOfEntriesToShow={setNumberOfEntriesToShow}>
</EntriesPerPage>

Example of display:

• Showing 1 to 10 of 150 entries
• Showing 51 to 75 of 150 entries

Search

This component is used to create the search feature in your datatable. You will have to add 2 props:

<Search
	setData={setData}
	notFilteredData={notFilteredData}>
</Search>

Pagination

This component is used to create the pagination. You will have to add 6 props in order to make your pagination:

<Pagination
	data={data}
	numberOfEntriesToShow={numberOfEntriesToShow}
	setRangeFrom={setRangeFrom}
	rangeTo={rangeTo}
	rangeFrom={rangeFrom}
	setRangeTo={setRangeTo}>
</Pagination>

Issues

For issues with the library: go to the GitHub issues page