Skip to content

React Table is a popular open-source library that provides a flexible and customizable way to display and manage data in a tabular format within React applications. It offers a set of powerful features and abstractions that make it easy to create interactive and responsive tables with sorting, filtering, pagination, and more.

Notifications You must be signed in to change notification settings

vishwajeet-7/react-table

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sorting Function

=> To add sorting functionality we use the hook useSortBy from 'react-table' => then we pass we modify the code at th of headers sections as

<th {...column.getHeaderProps(column.getSortByToggleProps())}>{column.render("Header")}
 <span>{column.isSorted ? (column.isSortedDesc ? <IoIosArrowDropdownCircle/> : <IoIosArrowDropupCircle/>) : ''}</span>
</th>                           

Formatting function

=> install date-fns if needed to filter the date. => destructure formate from 'date-fns', => in columns file give a property Cell like:

Cell:({value})=>{return format(new Date(value),'dd/mm/yyyy')}

whichever column you want to filter.

Filter function

=> use the hook useGlobalFilter to use filter using some keywords

=> make a GlobalFilter.jsx component and pass the filter and setFilter as props. => destructure state, setGlobalFilter form useTable. => pass useGlobalFilter outside the object in useTable. => it is a client side filtering method

About

React Table is a popular open-source library that provides a flexible and customizable way to display and manage data in a tabular format within React applications. It offers a set of powerful features and abstractions that make it easy to create interactive and responsive tables with sorting, filtering, pagination, and more.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published