Courses

React Laravel 12 Starter Kit: CRUD Project

Shadcn Table: Tasks List with TypeScript

You're reading a FREE PREVIEW of a PREMIUM course.
Login Or Join Premium ($129/year or $29/mo)
Summary of this lesson:
- Set up Shadcn UI table component with npx command
- Create TypeScript interface for Task data model
- Display tasks with conditional styling for completion status
- Learn TypeScript basics with option to use plain JavaScript

Link to the repository

[Only for premium members]

In the following lessons, we will fill our "Tasks" page with the full CRUD. Let's start with a table.

Table Component from Shadcn

Let's show the table of tasks. Remember, we had seeded it into the database previously:

React starter kit uses a React+Tailwind Shadcn UI library so you don't need to install it, it comes already pre-configured.

Generally, using Shadcn components is very easy:

  1. Install the component with npx
  2. Import it on top of your React file
  3. Use it inside your React file return ( ) section

Here's the screenshot from the official Shadcn docs for Laravel.

Shadcn has many components:

For this example, we will use Table component, follow its documentation and apply it to our Tasks List page.

Shadcn components are installed with the...

The full lesson is only for Premium Members.
Want to access all 14 lessons of this course? (77 min read)

You also get:

  • 76 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord