In this lesson, you will learn how to customize the cells and rows of the table.

You will also learn how to open a sheet showing the event details when the user clicks on the title.

The current table implementation looks like this:

You may notice the differences in the styling:

You'd also want to open a sheet when the user clicks on the event title like you do on the events page.

 library provides an easy way to customize the table's cells through the column definition.

 property inside the column object can receive a function that returns 

 object passed as a prop to access the specific row's data and render the cell content accordingly.

 property to the title cell and define a function that returns the title and the event's image using the 

import { EventImage } from "./event-item"

---
title: Custom Cells and Interactive Rows
description: Customize the cells and rows of the table and open a sheet showing the event details when the user clicks on the title.
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-sleek-web-applications-with-shadcn-ui-app/-/tree/main/new-events/07.03-tables-sheet?ref_type=heads
privateVideoUrl: https://stream.mux.com/NzNVRkWFteFmKEGrZ6CGFV1uY502R024OMEBA7xMER98I.m3u8
---

In this lesson, you will learn how to customize the cells and rows of the table.

You will also learn how to open a sheet showing the event details when the user clicks on the title.

The current table implementation looks like this:

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

The final table should look like this:

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

You may notice the differences in the styling:

-   The `date` and `location` headers include icons
-   The `date` cell is formatted with two different rows
-   The `title` cell renders the event image as well

You'd also want to open a sheet when the user clicks on the event title like you do on the events page.

### Customizing the Headers & Cells

The [`TanStack react-table`](https://tanstack.com/table/latest) library provides an easy way to customize the table's cells through the column definition.

The `cell` property inside the column object can receive a function that returns `JSX` as the cell content. You can use the `row` object passed as a prop to access the specific row's data and render the cell content accordingly.

#### The Title Cell

In the `components/events-table.tsx` file, add a `cell` property to the title cell and define a function that returns the title and the event's image using the `EventImage` component you created earlier.

Import the component first:

```javascript { actualFilename=../../code/new-events/07.02-customize-table/components/events-table.tsx endLine=8 startLine=8 statedFilename=components/events-table.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_07/lesson_07.03/.../code/new-events/07.02-customize-table/components/events-table.tsx#L8 }
import { EventImage } from "./event-item"
```

And implement the cell:

```javascript { actualFilename=../../code/new-events/07.02-customize-table/components/events-table.tsx endLine=23 startLine=11 statedFilename=components/events-table.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_07/lesson_07.03/.../code/new-events/07.02-customize-table/components/events-table.tsx#L11 }
export const columns: ColumnDef<Event>[] = [
  {
    accessorKey: "title",
    header: "Title",
    cell: ({ row }) => (
      <div className="flex items-center gap-4">
        <div className="w-12">
          <EventImage event={row.original} />
        </div>
        <span className="text-base">{row.original.title}</span>
      </div>
    ),
  },
```

#### The Date Cell

Navigate to the next column definition object in the array, and then:

-   Add a `cell` property to the date cell
-   Add a `header` property to add an icon to the header

For the cell property, you'll first need to import `dayjs`, the `CalendarIcon`, and the `Muted` component:

Eyal Cohen

Customize the cells and rows of the table and open a sheet showing the event details when the user clicks on the title.

Custom Cells and Interactive Rows

In the previous lesson, you have used Shudsen UI data table to show users

In this lesson, you will learn how to customize the cells and rows of the table

You will also learn how to make the table interactive, so when a user clicks an

a sheet with details will open. The current table should look like this for you

And the final table should look like this.

We need to change the date and location headers to include icons.

We need to format the date to two rows, and we need to render the event image

TensorFlow.com has a great API for customizing the table cells.

The cell property inside the column object, which we define in the events table

Allow passing a function that returns j6 for both the cell content and the

Now in the events table file, add a cell property to the title cell and define

that returns the title and the events image using the event image component you

Then wrap the event image component with the width we are looking for.

In this case, it's 12. And then we can render the event image.

We can get the row property from the cell and the event object is in row.

The event image will handle the aspect ratio aspect for us.

Now wonder it, render a span with a class name of text base.

And enter the row original title property.

Now for the date cell, start by importing the js, the calendar map_bin icon.

The map_bin icon and the muted text component.

Now implement the cell content and header for the date. Let's change the header

a function that returns the div class name.

Let's item_center_gup2 and then the calendar icon with size 4.

And the muted component with date and time title.

Then the cell get the row object, render a div.

Here we want the flex direction to be columns because we have two rows.

And then render a span with font bold class name.

Then call the js with the row original date property.

And below we want to show in a muted, under a muted component,

the row original date formatted for the hours.

Now the last cell we want to style is the location cell.

So change the header to return a component.

header style that we added for the date column.

The table is now should be well formatted.

And the table is now formatted like indeed these signs.

We will add a filter component on the next model.

Now the last step would be to add the sheet component to the title cell to make

Then wrap the title cell with the sheet component,

wrap the current content with the sheet trigger,

and then render a sheet content component, give it a bit of styling for

because we want it to scroll and set a max width,

and render a div with a grid and a gap for class names.

You can now reuse the components you have built in the previous lessons,

the event details, event details card, past the event to it,

and you can see the same sheet from the timeline being rendered here.

If you go to the explore page and click on an event,

we can see the same sheet being rendered.

You can now see the power in extracting reusable components.

It was so easy for us to recreate the same sheet.

In the next lesson, you'll create a new table for user created event,

and combine it with a new phone to let users create their own events.

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