Advanced Sorting

Explore how to add advanced sorting functionality to your React Table component using Lodash. Understand how to manage sort states, pass sorting methods through props, and create dynamic column headers that trigger sorting. This lesson helps you build interactive and user-friendly sortable tables in legacy React applications.

We'll cover the following...

- - Sorting our table component by column
- - Creating SORTS to reference any function
- - Setting sortKey in local state
- - Passing sortKey to the table component
- - Implementing sort in the Table
- - Our app so far:

Sorting our table component by column

We implemented a client and server-side search interaction earlier. Since you have a Table component, it makes sense to enhance it with advanced interactions. Next, we’ll introduce a sort functionality for each column by using the column headers of the Table.

It is possible to write your own sort function, but I prefer to use a utility library like Lodash for these cases. There are other options, but this is the one I prefer. We have Lodash running on the code widgets in this course but if you are following along on a local setup, install Lodash for our sort function:

1.Introduction

2.Intro to React and some JavaScript Basics

3.Basics in React

4.Getting Real with an API

5.Code Organization and Testing

6.Advanced React Components

7.State Management in React and beyond

8.Final Steps to Production

9.Appendix: Bootstrapping your React App

Advanced Sorting

Sorting our table component by column