React Table Tutorial - 7 - Sorting and Formatting

📱 Follow Codevolution

Sorting and Formatting in React Table

[zhangkate]

the tutor is really good at making examples and instructs it. Thanks for your work!!!

[nickcoleman]

Suggestion: use Cell property for formatting and data manipulation (NOT accessor).
{
Header: 'First Name',
Cell: ({ cell: { value }}) => <div style={{ fontWeight: 'bold' }}>{value}</div>,
accessor: 'first_name',
},
{
Header: 'Fullname',
accessor: 'last_name',
Cell: props => {
const { last_name, first_name } = props.row.original
return <div>{first_name} {last_name</div>
}
},

If you format the accessor property, then in most instances filtering (and other features) won't work as expected. 

Cell is also useful if you need info from other parts of the table (console.log(props) to see what you can pull -- it's quite extensive). The 2nd example shows combining multiple columns.

accessor is still required

[johnspinup]

Great tutorials, this ones nice and to the point!

[papagachango]

great guide.On your next tutorial for react-table filtering, please show how to do server side filtering through api. consider data loaded is paged.

[nuancetone]

Viswas, first, thanks for the great content. Always very clear and concise. Have a question about formatting rows. I've built a table using this tutorial and would like to add an action column wth a button for details or edit or delete. I followed the same workflow for the date format, using the value prop to grab the data there. But in this new column, there wouldn't be data for this prop and I'll need the ID of the element to go to another page for details or something else. Is there a way that's preferred for this?

[khandoor]

Again excellent content, are you going to do pagination as well?

[kemcadams]

so the date format is not correct with the current version of react-table - throws error on format

[antonin]

Can you please tell me what other arguments does Cell function receives?

[shalu]

hello dear, I want to create a react table which some of the data are inserted by the user which means editable row data, i want the table data at first empty. Thank you for this amazing videos in react table .

[umerfarooq]

Please also do pagination like we only want to show 10 records per page.
Thank you.

[devdive]

How can I disable sorting for a specific column?

[prabhatmishra]

any idea how to clear all filters on event onClick

[davebo]

after implementing the date format it is not possible to search with the globalFilter correctly anymore

[fola]

I need date range filtering with this react table

[irkfaisal]

I am not getting how to do it with data coming from API.