Loading video...

Video Failed to Load

Go Home

Free shadcn Data Grid with 20 advanced examples built with TANSTACK table and dnd kit: - Wrapper for TanStack table - Fully customizable table, row & cell - Drag & drop: rows/columns - Pinnable & movable columns - Local & remote data support - Rows selections - Movable columns...

reui_io's profile picture

ReUI

7,153 subscribers

29,699 views • 11 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

You can get preeeeetty close to a columns and row flexible data table using grid now
0:39

You can get preeeeetty close to a columns and row flexible data table using grid now

luis.

41,132 views • 1 year ago

We’re Gridmaxxing → Drag to reorder columns/rows → Automatic positioning → Automatic rows
0:42

We’re Gridmaxxing → Drag to reorder columns/rows → Automatic positioning → Automatic rows

Figma

153,002 views • 1 month ago

made a multiplayer data-grid with undo redo, cell selection, cell pasting, and presence tracking. built with shadcn /ui, TANSTACK table and db, and PartyKit .
0:39

made a multiplayer data-grid with undo redo, cell selection, cell pasting, and presence tracking. built with shadcn /ui, TANSTACK table and db, and PartyKit .

sadman

17,034 views • 14 days ago

Introducing Table and Data Table components. Powered by TanStack Table ✨ Built using Radix UI and Tailwind CSS. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation.
0:47

Introducing Table and Data Table components. Powered by TanStack Table ✨ Built using Radix UI and Tailwind CSS. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation.

shadcn

421,013 views • 3 years ago

Tidy Rows & Columns 🧹 #excel
0:20

Tidy Rows & Columns 🧹 #excel

CheatSheets

14,359 views • 1 year ago

A few Grid (still in beta) updates for you → Set min and max → Delete columns/rows → Adjust multiple grids
0:50

A few Grid (still in beta) updates for you → Set min and max → Delete columns/rows → Adjust multiple grids

Figma

103,739 views • 1 year ago

Highlight Active Cell, Rows, and Columns in Excel 🚨Don't miss this: #excel #learnexcel #exceltips #exceltricks #exceltutorials #office #Office365
0:59

Highlight Active Cell, Rows, and Columns in Excel 🚨Don't miss this: #excel #learnexcel #exceltips #exceltricks #exceltutorials #office #Office365

Learn Excel to excel

99,837 views • 2 years ago

airtable and linear linear like filters, and sorting for TANSTACK table. built with shadcn ui.
0:25

airtable and linear linear like filters, and sorting for TANSTACK table. built with shadcn ui.

sadman

96,489 views • 1 year ago

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇
0:33

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇

Viki ✨

385,849 views • 2 years ago

spreadsheet + data enrichment built with shadcn, TANSTACK table, AI SDK. thinking about publishing it as a custom artifact. anyone interested?
0:37

spreadsheet + data enrichment built with shadcn, TANSTACK table, AI SDK. thinking about publishing it as a custom artifact. anyone interested?

Kaiyu

85,900 views • 9 months ago

🏆 The Holy Grail Layout 🏆 Using grid-template you can write rows and columns all at the same time all with one line of code (kinda). More modern CSS layout tips →
0:56

🏆 The Holy Grail Layout 🏆 Using grid-template you can write rows and columns all at the same time all with one line of code (kinda). More modern CSS layout tips →

Chrome for Developers

21,300 views • 2 years ago

today's experiment: silky smooth fixed-height virtual table, rendered with canvas tested with 10^50+ rows of dynamic data
0:34

today's experiment: silky smooth fixed-height virtual table, rendered with canvas tested with 10^50+ rows of dynamic data

f1shy-dev

93,442 views • 10 months ago

As part of my assignment, I was tasked with designing a high-density data grid for an SEO platform. During development, our analysis of Google Analytics data revealed that the majority of our users access the platform on 13-inch display laptops. This insight necessitated optimizing the data grid for this screen size. A key challenge we encountered was the sidebar housing keyword filters, which occupied a significant portion of the available space. Since this feature was integral to the page, removing it was not an option. Even making it collapsible would have had minimal impact on the overall layout. Our initial approach involved implementing an inner horizontal scroll to accommodate additional columns. However, this solution introduced technical limitations due to the grid’s accordion UI pattern, which enables users to expand rows for detailed views. This functionality effectively split the table in half, making it difficult to synchronize scrolling across two separate grid sections within modern browsers. To address these constraints, I devised an alternative solution: implementing auto-expandable and collapsible columns based on content visibility. For instance, the "Flag" and "Performance" columns dynamically collapse by default and expand when hovered over, allowing users to access the necessary details when needed. This approach enabled us to fit all columns within a 13-inch display without relying on horizontal scrolling, ensuring a more efficient and user-friendly experience.
0:35

As part of my assignment, I was tasked with designing a high-density data grid for an SEO platform. During development, our analysis of Google Analytics data revealed that the majority of our users access the platform on 13-inch display laptops. This insight necessitated optimizing the data grid for this screen size. A key challenge we encountered was the sidebar housing keyword filters, which occupied a significant portion of the available space. Since this feature was integral to the page, removing it was not an option. Even making it collapsible would have had minimal impact on the overall layout. Our initial approach involved implementing an inner horizontal scroll to accommodate additional columns. However, this solution introduced technical limitations due to the grid’s accordion UI pattern, which enables users to expand rows for detailed views. This functionality effectively split the table in half, making it difficult to synchronize scrolling across two separate grid sections within modern browsers. To address these constraints, I devised an alternative solution: implementing auto-expandable and collapsible columns based on content visibility. For instance, the "Flag" and "Performance" columns dynamically collapse by default and expand when hovered over, allowing users to access the necessary details when needed. This approach enabled us to fit all columns within a 13-inch display without relying on horizontal scrolling, ensuring a more efficient and user-friendly experience.

virgil pana

44,560 views • 1 year ago

Fixing row and columns...
0:40

Fixing row and columns...

Today I Learned

729,770 views • 3 years ago

Just open-sourced the app I built to test Tailwind v4. • Tailwind v4 + React 19 • Custom themes, colors & scaling • Data Table with filters • Draggable & editable rows Code’s yours. Link below.
0:29

Just open-sourced the app I built to test Tailwind v4. • Tailwind v4 + React 19 • Custom themes, colors & scaling • Data Table with filters • Draggable & editable rows Code’s yours. Link below.

shadcn

538,188 views • 1 year ago

Did you know that Notion AI can generate tables with data? It's super useful for prefilling databases, for example with dates for the next month🗓️ 'Create a simple table with 2 columns: Note and Date. Prefill the table with date in '26 Feb 2023' format for the next 30 days'
0:23

Did you know that Notion AI can generate tables with data? It's super useful for prefilling databases, for example with dates for the next month🗓️ 'Create a simple table with 2 columns: Note and Date. Prefill the table with date in '26 Feb 2023' format for the next 30 days'

Michał Żołnieruk 📱👋

54,539 views • 3 years ago

XLOOKUP to Find and Return Multiple Columns or rows in Excel 🎯 Subscribe: 🔻Download Practice File: 📢COMMENT, SHARE, LIKE, Bookmark #excel #learnexcel #exceltips #exceltricks #exceltutorials
0:46

XLOOKUP to Find and Return Multiple Columns or rows in Excel 🎯 Subscribe: 🔻Download Practice File: 📢COMMENT, SHARE, LIKE, Bookmark #excel #learnexcel #exceltips #exceltricks #exceltutorials

Learn Excel to excel

93,777 views • 2 years ago

This is how a top designer designs complex data tables in Figma The amount of columns in this data table is insane 🤯 Darshan Gajara shows how he designed complex data tables for Hygraph in Figma 👇
1:50

This is how a top designer designs complex data tables in Figma The amount of columns in this data table is insane 🤯 Darshan Gajara shows how he designed complex data tables for Hygraph in Figma 👇

Jayneil Dalal

68,584 views • 1 year ago