Creating a table component

28 views
39 minutes watched
5 completions

To save us typing lots of HTML all the time, let's create a table component we can re-use.

Video thumbnail

Get full access

You need to subscribe to get full access to the video and lesson content.

Join 4.3K+ learners from companies like Shopify, Microsoft, Tiktok, AppSumo and Instacart.

$197
one-time payment

Copying and Modifying an Existing Table Element

To save time, I'm going to reuse a table element I created for playbooks.com.

Updating the Dashboard List Page

Now that we have the table element, let's update the list page on the dashboard:

  1. Go to settings, features and re-sync Cursor to index all table components
  2. Replace the existing list with x-table

Refining the Table Display

After implementing the table, we made the following improvements:

  1. Made the title clickable for editing, removing the separate edit button
  2. Added a column to display icons for items in each link page
    • External icons use images
    • Social...

Subscribe now to get full access to the lesson content.

Get started →