In this lesson, you'll add pagination and sorting to the 

 component. It will allow users to navigate through the events for which they have registered.

import {
  ColumnDef,
  SortingState,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table"

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),

You can adjust the default pagination size and style to fit your needs.

In the same table configuration object, add a 

    initialState: {
      pagination: {
        pageSize: 3,
      },
    },

Step 3 - Integrate the Pagination Component

 offers a reusable pagination component that you can use to manage the pagination state.

Copy and paste the following code into a new 

import { Table } from "@tanstack/react-table"
import { ChevronLeft, ChevronRight } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

interface DataTablePaginationProps<TData> {
  table: Table<TData>
}

export function DataTablePagination<TData>({
  table,
}: DataTablePaginationProps<TData>) {
  return (
    <div className="flex items-center justify-between px-2">
      <div className="flex items-center space-x-6 lg:space-x-8">
        <div className="flex items-center space-x-2">
          <p className="text-sm font-medium">Rows per page</p>
          <Select
            value={`${table.getState().pagination.pageSize}`}
            onValueChange={(value) => {
              table.setPageSize(Number(value))
            }}
          >
            <SelectTrigger className="h-8 w-[70px]">
              <SelectValue placeholder={table.getState().pagination.pageSize} />
            </SelectTrigger>
            <SelectContent side="top">
              {[3, 5, 10, 20, 50].map((pageSize) => (
                <SelectItem key={pageSize} value={`${pageSize}`}>
                  {pageSize}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
          Page {table.getState().pagination.pageIndex + 1} of{" "}
          {table.getPageCount()}
        </div>
        <div className="flex items-center space-x-2">
          <Button
            variant="outline"
            className="h-8 w-8 p-0"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
          >
            <span className="sr-only">Go to previous page</span>
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <Button
            variant="outline"
            className="h-8 w-8 p-0"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
          >
            <span className="sr-only">Go to next page</span>
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  )
}

import { DataTablePagination } from "./data-table-pagination"

          </TableBody>
        </Table>
      </div>
      <div className="flex items-center justify-end space-x-2 py-4">
        <DataTablePagination table={table} />
      </div>
    </div>

It shows the row per page settings, allowing users to change the page size:

import { DataTablePagination } from "./data-table-pagination"

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
}

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const [sorting, setSorting] = useState<SortingState>([])

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),

---
title: Pagination and Sorting
description: Add pagination and sorting to the EventsTable component
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-sleek-web-applications-with-shadcn-ui-app/-/tree/main/new-events/07.05-pagination?ref_type=heads
privateVideoUrl: https://stream.mux.com/IYpM4PArHJ2Ukd1FmDCHDz1HISBsqGIfp1hXUNzc4to.m3u8
---

In this lesson, you'll add pagination and sorting to the `EventsTable` component. It will allow users to navigate through the events for which they have registered.

## Pagination

### Step 1 - Add the Pagination Row Model

`react-table` provides a `getPaginationRowModel` function to hook into the `table` object.

Import it first:

```javascript { actualFilename=../../code/new-events/07.05-pagination/components/data-table.tsx endLine=12 startLine=4 statedFilename=app/events/data-events.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_07/lesson_07.05/.../code/new-events/07.05-pagination/components/data-table.tsx#L4 }
import {
  ColumnDef,
  SortingState,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table"
```

Then add it to the `useReactTable` hook:

```javascript { actualFilename=../../code/new-events/07.05-pagination/components/data-table.tsx endLine=40 startLine=36 statedFilename=app/events/data-table.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_07/lesson_07.05/.../code/new-events/07.05-pagination/components/data-table.tsx#L36 }
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
```

### Step 2 - Set the Default Pagination Size

You can adjust the default pagination size and style to fit your needs.

In the same table configuration object, add a `pageSize` to the `initialState.pagination` object:

```javascript { actualFilename=../../code/new-events/07.05-pagination/components/data-table.tsx endLine=50 startLine=46 statedFilename=app/events/data-table.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_07/lesson_07.05/.../code/new-events/07.05-pagination/components/data-table.tsx#L46 }
    initialState: {
      pagination: {
        pageSize: 3,
      },
    },
```

### Step 3 - Integrate the Pagination Component

`shadcn/ui` offers a reusable pagination component that you can use to manage the pagination state.

Copy and paste the following code into a new `components/data-table-pagination.tsx` file:

```javascript { actualFilename=../../code/new-events/07.05-pagination/components/data-table-pagination.tsx endChar=2289 endLine=71 startChar=0 startLine=1 statedFilename=components/data-table-pagination.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_07/lesson_07.05/.../code/new-events/07.05-pagination/components/data-table-pagination.tsx }
import { Table } from "@tanstack/react-table"
import { ChevronLeft, ChevronRight } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

interface DataTablePaginationProps<TData> {
  table: Table<TData>
}

export function DataTablePagination<TData>({
  table,
}: DataTablePaginationProps<TData>) {
  return (
    <div className="flex items-center justify-between px-2">
      <div className="flex items-center space-x-6 lg:space-x-8">
        <div className="flex items-center space-x-2">
          <p className="text-sm font-medium">Rows per page</p>
          <Select
            value={`${table.getState().pagination.pageSize}`}
            onValueChange={(value) => {
              table.setPageSize(Number(value))
            }}
          >
            <SelectTrigger className="h-8 w-[70px]">
              <SelectValue placeholder={table.getState().pagination.pageSize} />
            </SelectTrigger>
            <SelectContent side="top">
              {[3, 5, 10, 20, 50].map((pageSize) => (
                <SelectItem key={pageSize} value={`${pageSize}`}>
                  {pageSize}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
          Page {table.getState().pagination.pageIndex + 1} of{" "}
          {table.getPageCount()}
        </div>
        <div className="flex items-center space-x-2">
          <Button
            variant="outline"
            className="h-8 w-8 p-0"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
          >
            <span className="sr-only">Go to previous page</span>
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <Button
            variant="outline"
            className="h-8 w-8 p-0"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
          >
            <span className="sr-only">Go to next page</span>
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  )
}
```

Then, import and render the `DataTablePagination` component in the `EventsTable` component at the bottom of the file:

```javascript { actualFilename=../../code/new-events/07.05-pagination/components/data-table.tsx endLine=23 startLine=23 statedFilename=app/events/data-table.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_07/lesson_07.05/.../code/new-events/07.05-pagination/components/data-table.tsx#L23 }
import { DataTablePagination } from "./data-table-pagination"
```

```javascript { actualFilename=../../code/new-events/07.05-pagination/components/data-table.tsx endLine=108 startLine=102 statedFilename=app/events/data-table.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_07/lesson_07.05/.../code/new-events/07.05-pagination/components/data-table.tsx#L102 }
          </TableBody>
        </Table>
      </div>
      <div className="flex items-center justify-end space-x-2 py-4">
        <DataTablePagination table={table} />
      </div>
    </div>
```

Eyal Cohen

Add pagination and sorting to the EventsTable component

Pagination and Sorting

In this lesson, you will add pagination and sorting to the events table

It will allow users to navigate through the events for which they have

You can see the design here for the pagination and the sorting will be on the

The first step would be to add the pagination row model to the my events table.

Open the data table component and let's start with adding the imports.

We want to add the get pagination row model.

The get sorted row model and the sorting state object.

Then add them all to the use react table look.

Let's get a 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

ShotcNY offers a reusable pagination component that you can use to manage the

It's not installable but we can copy and paste it.

You can find the code below in the course text.

So add data table pagination component and let's give it a look.

The component receives a table prop which is from the use react table book.

We also need to install the select component from ShotcNY.

So run and paste ShotcNY at latest add select.

The component shows the row pair page settings and that's why we need this

It allows the 3, 5, 10, 20 and 50 options we can change it if you would like.

It shows the current page here and then it shows a go to the previous and go to

It should receive the table prop and we can wrap it.

And we can wrap it with another glass and py4.

The table should now display the data table pagination component.

Go to the my events page and we can now see the pagination components rendering

We are only registered to 3 so let's try and register for another event.

We are now registered to 5 and we can go between the pages and see the data

If we show 5 items we will see all the events we are registered for.

Now let's add sorting to the events table component.

Once the user will click a column header the table will sort the data based on

10 stack react table provides a simple model for implementing sorting.

Let's start by creating a new sorting state.

And add a new react state with the sorting property.

We can add a type to it with this sorting state that we already imported and

It's an array of the column sort property which have the column ID and the

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 justified.

And then it gets sorted row model equal to the function from react table.

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

Let's start by importing the button component.

And now for each column we want to update the header function to ever wrap your

We can access the column on the header function in the same way we access the

So flex item center justify start gap to zero padding.

On other we want to make the big round transparent.

And on click we want to call the column.togals sorting function.

This argument will define if the descending property will be too or false.

Now let's add the mu to the component with the title text.

Let's add the same thing to the data itself.

Keep the classes that we already have and add the ones that we wanted.

And add the variant ghost and the on click handler.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript