React Table Using shadcn/ui and TanStack | Personal Finance Dashboard App

preview_player
Показать описание
🚀 Welcome to Part 9 of our Personal Finance Dashboard series! Today, we're creating a data table component using shadcn/ui and react table from TanStack.

⭐️Timestamps ⭐️
⌨️ (00:00) Shadcn/ui table
⌨️ (05:28) Format money with currency
⌨️ (09:23) Table footer
⌨️ (10:58) Refactor using react-table
⌨️ (14:10) Render table headers
⌨️ (15:56) Define column definitions
⌨️ (22:09) Render table rows
⌨️ (24:00) Render No Results
⌨️ (25:09) Render table footer

Happy coding! 💻
  1. CodeWithOsvaldas
  2. react-table
  3. react table
  4. tanstack table
  5. next.js
  6. react
Рекомендации по теме
I Never Want 0:05:40

I Never Want to Create React Tables Any Other Way

Tables in NextJs 0:37:49

Tables in NextJs Using shadcn/ui and TanStack Table

React Table Using 0:28:07

React Table Using shadcn/ui and TanStack | Personal Finance Dashboard App

Best React Table 0:18:40

Best React Table Component To Use??

I Never Want 1:20:20

I Never Want To Create Tables Any Other Way

Edit/Delete row action 0:36:06

Edit/Delete row action buttons in Shadcn/UI React Table | Personal Finance Dashboard App

Simplest way to 0:19:40

Simplest way to build Data Table (Next.js, Shadcn, React, Tanstack)

You won't BELIEVE 0:35:58

You won't BELIEVE what I just did with TanStack's React Tables!

Shadcn/UI React Table 0:05:45

Shadcn/UI React Table Sorting | Personal Finance Dashboard App

React Table Tutorial 1:00:18

React Table Tutorial (TanStack Table)

How to Use 0:04:36

How to Use Shadcn DataTable Component with Next.js & React.js (Copy/Paste). #shadcn #nextjs #rea...

Shadcn UI Crash 0:07:29

Shadcn UI Crash Course #1 - Introduction & Setup

These 2 UI 0:05:03

These 2 UI Libraries Are The Perfect Combo

Tables with NextJS 0:08:48

Tables with NextJS 14 & @shadcn UI — Course part 8

Ship FAST with 0:05:20

Ship FAST with Shadcn/ui Blocks!

How Shadcn/ui ACTUALLY 0:32:38

How Shadcn/ui ACTUALLY Works

Next.js & React.js 0:21:55

Next.js & React.js Shadcn DataTable: Server-Side Search, Sort, Filter & Pagination Guide

shadcn/ui is great! 0:08:18

shadcn/ui is great! But what if...

Dynamic Table in 1:23:27

Dynamic Table in Next JS Tutorial: Setting Up Project and Building Frontend for Filters (Part 1)

Tanstack Table Design 0:40:57

Tanstack Table Design Using React js and tailwind css search, pagination, download option | #reactjs

This UI component 0:08:23

This UI component library is mind-blowing

UI Design Tips 0:04:28

UI Design Tips for a Better Data Table UX

Server-side Pagination | 0:00:51

Server-side Pagination | Tanstack Query, Tanstack Table, shadcn/ui

Criando UI no 0:14:55

Criando UI no React na velocidade da luz! (shadcn/ui)

Комментарии
Автор

exactly what I needed !! thanks for this video! Only thing is that I had to zoom in a lot since the font was a bit too small for me. Not a big issue tho. I subbed and liked.

SuperYoda
Автор

Yo, instead of saying what you're gonna build, 'show' an example as you take about what you're building in your intro, this would make it more interesting and viewers would be more likey to watch and follow.😉

morta
Автор

Nice mate! 🔥🔥 Thank you very much for sharing!
Could you please consider adding a form to submit expenses with the posibility to upload a photo?

naylord
Автор

shadcn table vs tanstack table, which is better ?

hooooman.
Автор

I have a Name column in which I have name and email, Can anybody tell me how to make search by name and email?

chhakulizingare