Implementing a Table with Pagination using Shadcn Table

Tables are essential for displaying data in an organized and user-friendly manner. When combined with pagination, they become even more powerful by allowing users to browse large datasets efficiently. This guide demonstrates how to implement a table with pagination using Shadcn UI components in a React application.

Prerequisites

Before getting started, ensure you have the following:

A React project set up with Create React App or a similar tool.
Installed Shadcn UI components and Tailwind CSS. If not installed, follow the Shadcn UI documentation for setup.

Install the necessary dependencies:

npm install @shadcn/ui

Step-by-Step Implementation

1. Setting up the Table Component

Start by creating a table component to display data. Shadcn UI provides a flexible Table component to customize the table structure.

Example Table Component:

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@shadcn/ui'

const ExampleTable = ({ data }) => {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>ID</TableHead>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.map((row) => (
          <TableRow key={row.id}>
            <TableCell>{row.id}</TableCell>
            <TableCell>{row.name}</TableCell>
            <TableCell>{row.email}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

export default ExampleTable

2. Adding Pagination Logic

To implement pagination, create a component that handles the pagination logic and integrates it with the table.

Example Pagination Component:

import { useState } from 'react'
import ExampleTable from './ExampleTable'

const PaginatedTable = ({ data, rowsPerPage = 5 }) => {
  const [currentPage, setCurrentPage] = useState(1)

  const totalPages = Math.ceil(data.length / rowsPerPage)
  const startIndex = (currentPage - 1) * rowsPerPage
  const endIndex = startIndex + rowsPerPage
  const paginatedData = data.slice(startIndex, endIndex)

  const handlePageChange = (newPage) => {
    setCurrentPage(newPage)
  }

  return (
    <div>
      <ExampleTable data={paginatedData} />
      <div className="mt-4 flex items-center justify-between">
        <button
          onClick={() => handlePageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className="rounded bg-gray-200 px-4 py-2 disabled:opacity-50"
        >
          Previous
        </button>
        <span>
          Page {currentPage} of {totalPages}
        </span>
        <button
          onClick={() => handlePageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
          className="rounded bg-gray-200 px-4 py-2 disabled:opacity-50"
        >
          Next
        </button>
      </div>
    </div>
  )
}

export default PaginatedTable

3. Using the Paginated Table Component

Pass your dataset to the PaginatedTable component to render the table with pagination.

Example Usage:

const App = () => {
  const data = [
    { id: 1, name: 'John Doe', email: '[email protected]' },
    { id: 2, name: 'Jane Smith', email: '[email protected]' },
    { id: 3, name: 'Alice Johnson', email: '[email protected]' },
    { id: 4, name: 'Bob Brown', email: '[email protected]' },
    { id: 5, name: 'Charlie White', email: '[email protected]' },
    { id: 6, name: 'Diana Prince', email: '[email protected]' },
  ]

  return (
    <div className="p-4">
      <h1 className="mb-4 text-xl font-bold">Paginated Table</h1>
      <PaginatedTable data={data} rowsPerPage={3} />
    </div>
  )
}

export default App

Customizing Pagination

Add Advanced Navigation

Enhance pagination with features like page numbers and jump-to-page functionality.

Styling

Use Tailwind CSS or custom styles to make the table and pagination controls visually appealing.

Conclusion

Integrating pagination with Shadcn tables is straightforward and highly customizable. By combining Shadcn UI components with React state management, you can build tables that efficiently handle large datasets while maintaining a polished user interface.

Key Takeaways:

Use Shadcn’s Table components to create dynamic and interactive tables.
Manage pagination with React state and custom logic.
Enhance the user experience with additional features and styling.

Start building your paginated tables today with Shadcn UI!