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.

 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

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 

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>
  )
}

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

---
title: Setting Up and Configuring Tables in shadcn/ui
description: Building a powerful table to display a list of events that users have registered for.
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-sleek-web-applications-with-shadcn-ui-app/-/tree/main/new-events/07.01-setting-up?ref_type=heads
---

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.

![table](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_07/lesson_07.02/public/assets/completed-table.png)

## 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:

```bash
npx shadcn-ui@latest add table
```

-   Installing `@tanstack/react-table` from `npm`:

```bash
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:

```javascript { actualFilename=../../code/new-events/07.01-setting-up/app/events/page.tsx endChar=298 endLine=15 startChar=0 startLine=1 statedFilename=app/events/page.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_07/lesson_07.02/.../code/new-events/07.01-setting-up/app/events/page.tsx }
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.

To create and structure the events table, you'll need to:

1.  Implement the `DataTable` component from `shadcn/ui`.
2.  Define the table's columns using `TanStack`, `ReactTable`, and `Column` definitions.
3.  Fetch the registered events list from the API and Render the table using the `DataTable` component.

Since you will create two tables that look and behave similarly but have different data, you will build an `EventsTable` component that you can reuse for both tables.

#### Step 1 - Implement the `DataTable` Component from `shadcn/ui`

The `shadcn/ui` `DataTable` component is not installable from the CLI like other components, but it's a composition of `react-table` with the `shadcn/ui` `Table` component.

Create a new file in `components/data-table.tsx` and add the following code:

```javascript
"use client"

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

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

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

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader>
          {table.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                return (
                  <TableHead key={header.id}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                  </TableHead>
                )
              })}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody>
          {table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map((row) => (
              <TableRow
                key={row.id}
                data-state={row.getIsSelected() && "selected"}
              >
                {row.getVisibleCells().map((cell) => (
                  <TableCell key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </TableCell>
                ))}
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={columns.length} className="h-24 text-center">
                No results.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  )
}
```

Eyal Cohen

Building a powerful table to display a list of events that users have registered for.

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