Skip to content

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

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages