Custom Cells and Interactive Rows

[00:00 - 00:09] In the previous lesson, you have used Shads and UI data table to show users events they've registered to. In this lesson, you will learn how to customize the cells and rows of the table .

[00:10 - 00:21] You will also learn how to make the table interactive, so when a user clicks an event, a sheet with details will open. The current table should look like this for you.

[00:22 - 00:31] And the final table should look like this. We need to change the date and location headers to include icons.

[00:32 - 00:42] We need to format the date to two rows, and we need to render the event image for the Titan. Tenshtack React Table has a great API for customizing the table cells.

[00:43 - 00:54] The cell property inside the column object, which we define in the events table component. This is the column object.

[00:55 - 01:19] Allow passing a function that returns J6 for both the cell content and the column header. Now in the events table file, add a cell property to the title cell and define a function, that returns the title and the event's image using the event image component you created earlier.

[01:20 - 01:29] So let's create a wrapping div. Then wrap the event image component with the width we are looking for.

[01:30 - 01:35] In this case, it's 12. And then we can render the event image.

[01:36 - 01:46] We can get the row property from the cell. And the event object is in row.original.

[01:47 - 01:58] The event image will handle the aspect ratio aspect for us. Now under it, render a span with a class name of text base.

[01:59 - 02:15] And render the row original title property. Now for the date cell, start by importing the JS, the calendar mapbini icon.

[02:16 - 02:37] The calendar icon from Lucidedev. The mapbini icon and the muted text component.

[02:38 - 02:52] Now implement the cell content and header for the date. Let's change the header to B. A function that returns the div class name.

[02:53 - 02:58] LexitemCenter.gap2. And then the calendar icon.

[02:59 - 03:13] With size 4. And the muted component with date and time title.

[03:14 - 03:25] Then the cell, get the row object, render a div. Here we want the flex direction to be columns because we have two rows.

[03:26 - 03:36] And then render a span with font-pulled class name. Then call the JS with the world original date property.

[03:37 - 03:53] And format it here to show the date. And below we want to show in a muted under muted component, the row original date formatted for the hours.

[03:54 - 04:01] Now the last cell we want to style is the locations. It requires spatial error.

[04:02 - 04:07] So change the header to return a component. Return a div.

[04:08 - 04:25] And we're going to create the same header style that we had for the date column . The table is now should be well-formatted.

[04:26 - 04:29] Let's refresh the page. Go to the MyEventS page.

[04:30 - 04:37] And the table is now formatted like in Ddesigns. We will add a filter component on the next model.

[04:38 - 05:09] Now the last step would be to add the sheet component to the title cell to make it interactive. Import the sheet component, the sheet content, and the sheet trigger, prompt, UI components, UI sheet.

[05:10 - 05:40] 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 overflowing because we want it to scroll and set a max width. And render a div with a grid and gap for class names.

[05:41 - 06:03] 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 the event registration card. And which you will also pass the event.

[06:04 - 06:14] Let's see that in action. Go to the browser, click on the title, and you can see the same sheet from the timeline being rendered here.

[06:15 - 06:24] If you go to the Explorer page and click on an event, we can see the same sheet being rendered. You can now see the power in extracting the reusable component.

[06:25 - 06:36] 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 form to let users create their own events.