Skip to content

Commit 42a57d6

Browse files
committed
Update data table skill shadcn install guidance
1 parent fec2877 commit 42a57d6

6 files changed

Lines changed: 48 additions & 12 deletions

File tree

packages/virtuoso-skills/skills/data-table/SKILL.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ A virtualized React data table (rows and columns) with grouped rows, sticky colu
1717
**Shadcn (pre-styled wrapper)** — for projects using shadcn/ui conventions:
1818

1919
```bash
20-
npx shadcn@latest add https://virtuoso.dev/r/data-table.json
20+
npx shadcn@latest add petyosi/react-virtuoso/data-table
2121
```
2222

2323
This installs a styled wrapper at `@/components/ui/data-table` exporting `DataTable`, `DataTableColumn`, `DataTableColumnHeader`, `DataTableCell`.

packages/virtuoso-skills/skills/data-table/references/1.installation/01.shadcn.md

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Install With shadcn/ui
3-
description: Add the styled Virtuoso data table wrapper from the virtuoso.dev shadcn registry and start with a polished default table.
3+
description: Add the styled Virtuoso data table wrapper from the GitHub shadcn registry and start with a polished default table.
44
sidebar:
55
label: Shadcn Install
66
---
@@ -16,18 +16,30 @@ The shadcn registry copies a `DataTable` wrapper into `@/components/ui/data-tabl
1616
## Add the registry component
1717

1818
```bash
19-
npx shadcn@latest add https://virtuoso.dev/r/data-table.json
19+
npx shadcn@latest add petyosi/react-virtuoso/data-table
2020
```
2121

2222
The command writes the wrapper to `@/components/ui/data-table` and imports `@virtuoso.dev/data-table/styles.css` (structural layout defaults). No extra CSS setup is needed.
2323

24+
Feature-specific wrapper components use the same GitHub registry address. For example, add the resize handle when you enable column resizing:
25+
26+
```bash
27+
npx shadcn@latest add petyosi/react-virtuoso/data-table-resize-handle
28+
```
29+
30+
The hosted registry URL still works if you prefer the existing virtuoso.dev registry endpoint:
31+
32+
```bash
33+
npx shadcn@latest add https://virtuoso.dev/r/data-table.json
34+
```
35+
2436
## Icon library
2537

2638
The wrapper uses [`lucide-react`](https://lucide.dev/) for the loading spinner, error icon, and the drag grip on the reorderable column header. The `npx shadcn add` command installs `lucide-react` as a dependency on first run.
2739

2840
shadcn's `iconLibrary` field in `components.json` only rewrites icon imports for the canonical shadcn registry — it does not touch components from third-party registries like ours. If your project uses a different icon set (`@radix-ui/react-icons`, `phosphor-react`, etc.) and you want the table icons to match, open the installed files under `@/components/ui/data-table` and swap the lucide imports for your library's equivalents. The icons appear in:
2941

30-
- `data-table.tsx``Loader2` (spinner), `AlertCircle` (error state)
42+
- `index.tsx``Loader2` (spinner), `AlertCircle` (error state)
3143
- `column-reorder/reorder-grip.tsx``GripVertical` (drag handle)
3244

3345
## Basic styled table

plugins/virtuoso-skills/skills/data-table/SKILL.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ A virtualized React data table (rows and columns) with grouped rows, sticky colu
1717
**Shadcn (pre-styled wrapper)** — for projects using shadcn/ui conventions:
1818

1919
```bash
20-
npx shadcn@latest add https://virtuoso.dev/r/data-table.json
20+
npx shadcn@latest add petyosi/react-virtuoso/data-table
2121
```
2222

2323
This installs a styled wrapper at `@/components/ui/data-table` exporting `DataTable`, `DataTableColumn`, `DataTableColumnHeader`, `DataTableCell`.

plugins/virtuoso-skills/skills/data-table/references/1.installation/01.shadcn.md

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Install With shadcn/ui
3-
description: Add the styled Virtuoso data table wrapper from the virtuoso.dev shadcn registry and start with a polished default table.
3+
description: Add the styled Virtuoso data table wrapper from the GitHub shadcn registry and start with a polished default table.
44
sidebar:
55
label: Shadcn Install
66
---
@@ -16,18 +16,30 @@ The shadcn registry copies a `DataTable` wrapper into `@/components/ui/data-tabl
1616
## Add the registry component
1717

1818
```bash
19-
npx shadcn@latest add https://virtuoso.dev/r/data-table.json
19+
npx shadcn@latest add petyosi/react-virtuoso/data-table
2020
```
2121

2222
The command writes the wrapper to `@/components/ui/data-table` and imports `@virtuoso.dev/data-table/styles.css` (structural layout defaults). No extra CSS setup is needed.
2323

24+
Feature-specific wrapper components use the same GitHub registry address. For example, add the resize handle when you enable column resizing:
25+
26+
```bash
27+
npx shadcn@latest add petyosi/react-virtuoso/data-table-resize-handle
28+
```
29+
30+
The hosted registry URL still works if you prefer the existing virtuoso.dev registry endpoint:
31+
32+
```bash
33+
npx shadcn@latest add https://virtuoso.dev/r/data-table.json
34+
```
35+
2436
## Icon library
2537

2638
The wrapper uses [`lucide-react`](https://lucide.dev/) for the loading spinner, error icon, and the drag grip on the reorderable column header. The `npx shadcn add` command installs `lucide-react` as a dependency on first run.
2739

2840
shadcn's `iconLibrary` field in `components.json` only rewrites icon imports for the canonical shadcn registry — it does not touch components from third-party registries like ours. If your project uses a different icon set (`@radix-ui/react-icons`, `phosphor-react`, etc.) and you want the table icons to match, open the installed files under `@/components/ui/data-table` and swap the lucide imports for your library's equivalents. The icons appear in:
2941

30-
- `data-table.tsx``Loader2` (spinner), `AlertCircle` (error state)
42+
- `index.tsx``Loader2` (spinner), `AlertCircle` (error state)
3143
- `column-reorder/reorder-grip.tsx``GripVertical` (drag handle)
3244

3345
## Basic styled table

skills/data-table/SKILL.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ A virtualized React data table (rows and columns) with grouped rows, sticky colu
1717
**Shadcn (pre-styled wrapper)** — for projects using shadcn/ui conventions:
1818

1919
```bash
20-
npx shadcn@latest add https://virtuoso.dev/r/data-table.json
20+
npx shadcn@latest add petyosi/react-virtuoso/data-table
2121
```
2222

2323
This installs a styled wrapper at `@/components/ui/data-table` exporting `DataTable`, `DataTableColumn`, `DataTableColumnHeader`, `DataTableCell`.

skills/data-table/references/1.installation/01.shadcn.md

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Install With shadcn/ui
3-
description: Add the styled Virtuoso data table wrapper from the virtuoso.dev shadcn registry and start with a polished default table.
3+
description: Add the styled Virtuoso data table wrapper from the GitHub shadcn registry and start with a polished default table.
44
sidebar:
55
label: Shadcn Install
66
---
@@ -16,18 +16,30 @@ The shadcn registry copies a `DataTable` wrapper into `@/components/ui/data-tabl
1616
## Add the registry component
1717

1818
```bash
19-
npx shadcn@latest add https://virtuoso.dev/r/data-table.json
19+
npx shadcn@latest add petyosi/react-virtuoso/data-table
2020
```
2121

2222
The command writes the wrapper to `@/components/ui/data-table` and imports `@virtuoso.dev/data-table/styles.css` (structural layout defaults). No extra CSS setup is needed.
2323

24+
Feature-specific wrapper components use the same GitHub registry address. For example, add the resize handle when you enable column resizing:
25+
26+
```bash
27+
npx shadcn@latest add petyosi/react-virtuoso/data-table-resize-handle
28+
```
29+
30+
The hosted registry URL still works if you prefer the existing virtuoso.dev registry endpoint:
31+
32+
```bash
33+
npx shadcn@latest add https://virtuoso.dev/r/data-table.json
34+
```
35+
2436
## Icon library
2537

2638
The wrapper uses [`lucide-react`](https://lucide.dev/) for the loading spinner, error icon, and the drag grip on the reorderable column header. The `npx shadcn add` command installs `lucide-react` as a dependency on first run.
2739

2840
shadcn's `iconLibrary` field in `components.json` only rewrites icon imports for the canonical shadcn registry — it does not touch components from third-party registries like ours. If your project uses a different icon set (`@radix-ui/react-icons`, `phosphor-react`, etc.) and you want the table icons to match, open the installed files under `@/components/ui/data-table` and swap the lucide imports for your library's equivalents. The icons appear in:
2941

30-
- `data-table.tsx``Loader2` (spinner), `AlertCircle` (error state)
42+
- `index.tsx``Loader2` (spinner), `AlertCircle` (error state)
3143
- `column-reorder/reorder-grip.tsx``GripVertical` (drag handle)
3244

3345
## Basic styled table

0 commit comments

Comments
 (0)