Setting Up and Configuring Tables in shadcn/ui

[00:00 - 00:10] In this lesson, you will build a table to display a list of events that users have registered for. Later on in this module, you will also build a table to display the user created events.

[00:11 - 00:21] The API offers a RSVP route that returns a list of events the user has registered for. You will use this route to fetch the data for the table.

[00:22 - 00:29] The first step would be setting up and configuring the events table. shadcn/ui offers an amazing data table component.

[00:30 - 00:44] Installing it required two for months, adding the shadcn/ui table component through the shadcn/ui CLI. npx shadcn-ui@latest add table The second one would be installing 10 stack ReactTable.

[00:45 - 00:56] So when PM installed as S, 10 stack/reactable. You are now ready to create your first shadcn/ui table.

[00:57 - 01:10] You don't want to create the new NextJest route under /events. So create a new file in a new folder under the app folder called events and a page.tsx5.

[01:11 - 01:49] Now import the H3 component and import the register divent table, which will implement in this lesson. Then export default function, events page, render a div, with a class name of grid with a full ngap4, render an H3 component with a title of register divents, and render the registered events component.

[01:50 - 02:01] Now create a new register divent file. It can be collocated with the page component.

[02:02 - 02:09] And to create a structured events table, you need a few things. The first one is implementing the data table component from shadcn/ui.

[02:10 - 02:34] The second is defining the table columns using 10 stack/reactable and 10 stack/ column definition, and then fetch the register divents list from the API and render the table using the data table component. Since you will create two tables that look and behave similarly, but have different data, you will build an events table component that you can reuse for both tables.

[02:35 - 02:49] Let's implement first the data table component from shadcn/ui. The shadcn/ui data table component is not installable from the CLI like other component, but it's a composition of react table with the shadcn/ui table component.

[02:50 - 03:01] So create a new file in components/data table, and add the following code. You can copy and paste it from the text course below.

[03:02 - 03:14] I'm going to copy and paste it as well. The data table component receives a columns prop, which defines the table structure and adding, and a data pop, which will specify the table rows.

[03:15 - 03:33] The component calls the use react table hook to create a react table instant, to manage the table state, render the table, and enabling pagination, sorting, and user interaction. It then renders the table using the table components that we just installed, while calling the react table instance render function.

[03:34 - 04:02] Like here, and here, the get row model rows, and row.getvisibleCells functions. Since the component receives a column array, you'll need to define the table columns in your table definition, inside app/components/event/event/table, add the following code.

[04:03 - 04:31] First, we're going to use the column definition, so we import that from 10 stack table. Then import the event type, from types/events, and import the data table component.

[04:32 - 04:56] Now let's create the columns, which are from the column depth type, with the event generic, and it's an array. And first, add the accessor key, which defines how is the table going to access the column property, the column data on the event object.

[04:57 - 05:14] Here we want to have the title one, and then the header, which is the text or component, for the column header in the rendering part. The second accessor key will be the date, and the date header as well.

[05:15 - 05:26] And the last accessor key is the location, with the location header. Now create a new component called event/table.

[05:27 - 06:02] It receives an array of events as a prop, and you should already be familiar with this pattern. And then it renders, and then it renders the data table component with the columns and the event, columns equal columns, data equal events.

[06:03 - 06:29] The last step would be to fetch the user events, and render them inside the register events component. Define the user's client component, then import the user's WRook, import the R spP type.

[06:30 - 07:07] We need to edit first. It includes an event from type event, and the user ID, which is string, go back to the component, then import the user's WRook, from the user context, and the event's table that we've just created.

[07:08 - 07:35] Export columns, register event, we are creating the component, equal a function , we want to get the token from the user's WRook, then we want to make a network request to the server. Let's type it, we are receiving an object with an RspP property, cut, from the RspP type.

[07:36 - 08:09] Then we are passing an array to use the SWR, because we want to pass the token as well from the component. Then we are going to create a new function that will take the URL, this one, and the token, as an arguments, and call the Fetcher function.

[08:10 - 08:22] Missing a parenthesis. We also need to update the Fetcher function to receive a token as a param, so it will be able to pass it in the headers as an authorization header property.

[08:23 - 08:33] So make the Fetcher receive a token. And then if there is a token, pass an headers object, and if not, pass an undef ined as the second argument of the Fetch function.

[08:34 - 09:10] Then you can simply render the event's table component with the events, return from the API, and then pass the event property. We want to pass only the event property, and not the user-ready property to the events table, and close the component.

[09:11 - 09:23] Run the app. If it's not running, feel free to send me a message on Discord, jump on the channel, or shoot an email, and we'll let you search it out.

[09:24 - 09:35] Navigate with the application. Then navigate to the My Events page.

[09:36 - 09:45] We forgot to import the events table. And now you should see the events you have registered for.

[09:46 - 10:04] If you haven't registered to an event, feel free to go here, click on RSVP, confirm, and then going back to the My Events page, you're going to see your event added to the table. In the next lesson, you will learn how to format sales, and open a sheet when the user clicks on the title.