Creating a table component

22 views
33 minutes watched
4 completions

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

  • Space Play/pause
  • /
  • Shift + + Increase speed
  • /
  • Shift + - Decrease speed
  • /
  • F Toggle fullscreen

Get full access

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

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

Lifetime

Lifetime access to all Playbooks courses.

Only 171 spots left!

$197 one-time

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 media icons use SVG files from blade components
  3. Adjusted icon colors to plain black
  4. Changed icon size from w-6 h-6 to size-5 for better proportions

Implementing Wire Navigation

To improve user experience, we added wire navigation:

  1. Added wire:navigate to the clickable title
  2. This allows changing views without a page load

Testing and Limitations

We tested the new table by creating a new link page:

  • Discovered free tier users are limited to two link pages
  • Suggested improvements:
    • Show limitation before creation attempt
    • Disable "Create" button on dashboard for free users
    • Add "Upgrade for more" message

Next Steps: Pay Features and Subscriptions

...

Subscribe now to get full access to the lesson content.

Get started →