Setting Up and Configuring Tables in shadcn/ui

In this lesson, you'll build a table to display a list of events that users have registered for.

Later on in this module, you'll also build a table to display the user created events.

The API offers a /rsvp route that returns a list of events the user has registered for. You'll use this route to fetch the data for the table.

Setting Up and Configuring Your Events Table#

Installing shadcn/ui DataTable requires two commands:

• Adding the shadcn/ui Table component through the shadcn/ui CLI:

xxxxxxxxxx

npx shadcn-ui@latest add table

• Installing @tanstack/react-table from npm:

xxxxxxxxxx

npm install @tanstack/react-table

Creating and Structuring the Events Table#

You'll now create your first table. It'll show users the events they have registered for through the home page.

The first step will be to create a new page at /events.

Create a new file at app/events/page.tsx and add the following code:

xxxxxxxxxx

import { H3 } from "@/components/typography"

​

import { RegisteredEvents } from "./registered-events"

​

export default function EventsPage() {

  return (

    <div>

      <div className="grid w-full gap-4">

        <H3>Registered Events</H3>

        <RegisteredEvents />

      </div>

    </div>

  )

}

Create a new registered-table.tsx file in the app/events directory.

This file will contain the table that displays the events that the user has registered for.