Загрузка видео...

Не удалось загрузить видео

На главную

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 год назад