Pagination and Sorting

[00:00 - 00:08] In this lesson, you will add pagination and sorting to the events table component. It will allow users to navigate through the events for which they have registered for.

[00:09 - 00:18] You can see the design here for the pagination and the sorting will be on the columns level. The first step would be to add the pagination row model to the My Events table.

[00:19 - 00:35] Open the data table component. And let's start with adding the imports. We want to add the GetPagination row model, the GetSorted, row model, and the sorting state object.

[00:36 - 00:59] Then add them all to the UseReact table look. Let's get the pagination row model first and add pagination to the table. Now we want to set the default pagination side. So pass an initial state with the pagination object and the page size equal to 3.

[01:00 - 01:20] ShadCNUI offers a reusable pagination component that you can use to manage the pagination state. It's not installable but we can copy and paste it. You can find the code below in the course text. So add that the table pagination component and let's give it a look.

[01:21 - 01:30] The component receives a table pro, which is from the UseReact table. Book. We also need to install the Select component from ShadCNUI.

[01:31 - 01:42] SoRanNPX ShadCNUI at latest. Add Select. Then we run the app.

[01:43 - 02:11] The component shows the row pair page settings and that's why we need this Select for. It allows the 3, 5, 10, 20, and 50 options. We can change it if you would like because we have control. It shows the current page here and then it shows a go to the previous and go to the next buttons. So it's a fairly simple component. It simply does the work for us.

[02:12 - 02:47] Let's import the component and we need to render it below. It should receive the table prop and we can wrap it with another class. NPY4 and let's try and see that in action. The table should now display the data table pagination component. Refresh the page.

[02:48 - 03:05] Go to the MyVence page. Add a UseClient to the Event page. Add UseClient directive. Go to the MyVence page and we can now see the pagination components rendering.

[03:06 - 03:22] We are only registered to 3 so let's try register for another event. We are now registered to 5 and we can go between the pages and see the data change.

[03:23 - 03:30] If we show 5 items we will see all the events we are registered for. Now let's add sorting to the event's table component.

[03:31 - 03:44] Once the user will click a column header the table will store the data based on the column. Same with pagination. TenshtackReactTable provides a simple model for implementing sorting.

[03:45 - 04:11] Let's start by creating a new sorting state. Go to the DathOfTable component and add a new React state with this sorting property. Equal the UseStateTookFromReact. We can add a type to it with this sorting state that we already imported then set it initially to an empty array. The sorting state looks like that.

[04:12 - 05:16] It's an array of the column sort property which have the column ID and the asc ending or descending property. So the value will look something like that. An array with an ID and descending either true or false. Now define the own sorting change function which will be the set sorting state that we just defined. And then it gets sorted row model equal to the function from ReactTable. Don't forget to call the function and then we need to add the state which will be equal to the sorting property. Now we need to add the sorting controls to the table header in the events table component. Let's start by importing the button component. And now for each column we want to update the header function to ever wrap her button.

[05:17 - 05:28] The tone click will toggle the sorting. We can access the column on the header function. In the same way we access the row in the cell function. So let's change the title first.

[05:29 - 05:41] Get the column from the props. Then return the button. Should be with variant ghost. Let's style it. So flex item center just if I start gap2.

[05:42 - 06:09] Zero padding. On other we want to make the background transparent. And on click we want to call the column the toggle sorting function and pass the is sorted equal to ascending. The argument will define if the descending property will be true or false.

[06:10 - 06:32] Now let's add a muted component with the title text and don't forget to add the comma. Let's add the same thing to the date cell. We can replace the div with the button. Keep the classes that we already have and add the ones that we wanted, beging transparent.

[06:33 - 06:56] Let's add a justify start as well. And add the variant ghost and the on click handler. Should be the same column dot. Grab the column from the props and column dot toggle sorting with the get is sorted function.

[06:57 - 07:34] Great we can just simply copy and paste it for the location property. And open the browser. Don't forget to run the app. If you have an issue again feel free to jump on the discord. Play to the my event page. And I will should click on the date and time property or the title or the location. You can see the item order being changed based on the sorting.

[07:35 - 07:44] That's it for this lesson. In the next lesson you will adapt this page for mobile views. It's currently not really supporting mobile view.