正在加载视频...

视频加载失败

返回首页

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 次观看 • 11 个月前 •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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 次观看 • 1 年前

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 次观看 • 1 个月前

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 次观看 • 14 天前

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 次观看 • 3 年前

Tidy Rows & Columns 🧹 #excel
0:20

Tidy Rows & Columns 🧹 #excel

CheatSheets

14,359 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 2 年前

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 次观看 • 1 年前

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 次观看 • 2 年前

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 次观看 • 9 个月前

🏆 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 次观看 • 2 年前

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 次观看 • 10 个月前

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 次观看 • 1 年前

Fixing row and columns...
0:40

Fixing row and columns...

Today I Learned

729,770 次观看 • 3 年前

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 次观看 • 1 年前

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 次观看 • 3 年前

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 次观看 • 2 年前

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 次观看 • 1 年前