Skip to content

Commit b5339c5

Browse files
austinm911riccardoperralachlancollinsautofix-ci[bot]tannerlinsley
authored
[v9/alpha] docs: simple shadcn example (#5917)
* feat(angular-table): Refactor Flex render implementation - Zoneless, Better type safety, allows reactive values into cell content, re-render when cell context changes, allow to pass signal inputs into custom components (#5856) * feat: flex render granular updates * updates * cleanup * cleanup * cleanup * fix test * angular add explicit version of typescript * Fix typescript versions * add some testing for flex render in table * fix test infra * refactor flex render * update lock * fix tests, cleanup code * fix tests, cleanup code * flex render signal content support * flex render signal content support * improve view flags, handle state update in zoneless * improve view flags, handle state update in zoneless * fix * ci: apply automated fixes * clean docs test fix doc add flexRenderComponent util * test cases * fix: enable computed rowModels * fix test for rowModel * assures that `updateProps` update inputs only for Component reference type * Merge pull request #1 from riccardoperra/feat/angular-flex-render-support-output-binding add support for angular outputs in flex-render-component --------- Co-authored-by: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * release: v8.21.0 * docs(angular): add editable, row-dnd and performant column resizing example (#5881) * add editable cell example * add editable cell example * row dnd exmaple * revert basic * ci: apply automated fixes * column resizing performant example * fix * fix budgets * ci: apply automated fixes * typo --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * docs(angular): add missing faker-js deps (#5883) * fix(lit-table): dynamic data updates in the Lit Table Adapter (#5884) * this fixes an issue I discussed in discord where with the lit table adapter, updating a data array did not get reflected by the table. It is a one-line change to the TableController, and a new example that demonstrates the difference. * Update packages/lit-table/src/index.ts per suggestion from @kadoshms Co-authored-by: Mor Kadosh <kadoshms@gmail.com> --------- Co-authored-by: Luke Schierer <lschiere@amazon.com> Co-authored-by: Mor Kadosh <kadoshms@gmail.com> * docs: add experimental virtualization example (#5895) * docs: add experimental virtualization example * work on experimental virtualized column examples --------- Co-authored-by: Kevin Van Cott <kevin.vancott@rentvision.com> * release: v8.21.1 * docs: example name * docs(angular): add expanding and sub components examples (#5898) * docs(angular): add expanding example * docs(angular): add sub components example * docs(angular): fix config.json * fix conflicts in lit package * remove angular package non-fesm export * since angular 19, ng-packgr only bundle a `fesm2022` export * docs: exp virtual - remeasure when table state changes * docs: virtualizer tbody from onchange * update all angular examples * fix conflicts in examples/react * ci: apply automated fixes * fix tests * ci: apply automated fixes * fix tests * ci: apply automated fixes * angular: update vite config to support vitest workspaces * init shadcn example --------- Co-authored-by: Riccardo Perra <perrariccardo0@gmail.com> Co-authored-by: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Tanner Linsley <tannerlinsley@users.noreply.github.com> Co-authored-by: Riccardo Perra <riccardo.perra@icloud.com> Co-authored-by: Luke Schierer <2224044+lschierer@users.noreply.github.com> Co-authored-by: Luke Schierer <lschiere@amazon.com> Co-authored-by: Mor Kadosh <kadoshms@gmail.com> Co-authored-by: Kevin Van Cott <kevinvandy656@gmail.com> Co-authored-by: Kevin Van Cott <kevin.vancott@rentvision.com>
1 parent 3211ed8 commit b5339c5

File tree

12 files changed

+585
-0
lines changed

12 files changed

+585
-0
lines changed

‎docs/config.json

+4
Original file line numberDiff line numberDiff line change
@@ -522,6 +522,10 @@
522522
"to": "framework/react/examples/basic",
523523
"label": "Basic"
524524
},
525+
{
526+
"to": "framework/react/examples/shadcn-basic",
527+
"label": "Shadcn Basic"
528+
},
525529
{
526530
"to": "framework/react/examples/basic-table-helper",
527531
"label": "Basic with Helpers"

‎examples/react/shadcn-basic/.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎examples/react/shadcn-basic/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn`
6+
- `npm run start` or `yarn start`

‎examples/react/shadcn-basic/components.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "src/index.css",
9+
"baseColor": "zinc",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

‎examples/react/shadcn-basic/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite App</title>
7+
<script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎examples/react/shadcn-basic/package.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "tanstack-table-example-shadcn-basic",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"private": true,
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"serve": "vite preview",
10+
"start": "vite",
11+
"lint": "eslint ./src"
12+
},
13+
"dependencies": {
14+
"@radix-ui/react-slot": "^1.1.2",
15+
"@tailwindcss/vite": "^4.0.4",
16+
"@tanstack/react-table": "^9.0.0-alpha.10",
17+
"class-variance-authority": "^0.7.1",
18+
"clsx": "^2.1.1",
19+
"lucide-react": "^0.474.0",
20+
"react": "^19.0.0",
21+
"react-dom": "^19.0.0",
22+
"tailwind-merge": "^3.0.1",
23+
"tailwindcss": "^4.0.4",
24+
"tailwindcss-animate": "^1.0.7"
25+
},
26+
"devDependencies": {
27+
"@rollup/plugin-replace": "^6.0.1",
28+
"@types/react": "^19.0.1",
29+
"@types/react-dom": "^19.0.1",
30+
"@vitejs/plugin-react": "^4.3.4",
31+
"typescript": "5.6.3",
32+
"vite": "^5.4.11"
33+
}
34+
}

‎examples/react/shadcn-basic/src/components/ui/button.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import * as React from 'react'
2+
import { Slot } from '@radix-ui/react-slot'
3+
import { cva } from 'class-variance-authority'
4+
import type { VariantProps } from 'class-variance-authority'
5+
6+
import { cn } from '@/lib/utils'
7+
8+
const buttonVariants = cva(
9+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0",
10+
{
11+
variants: {
12+
variant: {
13+
default:
14+
'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
15+
destructive:
16+
'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
17+
outline:
18+
'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
19+
secondary:
20+
'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
21+
ghost: 'hover:bg-accent hover:text-accent-foreground',
22+
link: 'text-primary underline-offset-4 hover:underline',
23+
},
24+
size: {
25+
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
26+
sm: 'h-8 rounded-md px-3 has-[>svg]:px-2.5',
27+
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
28+
icon: 'size-9',
29+
},
30+
},
31+
defaultVariants: {
32+
variant: 'default',
33+
size: 'default',
34+
},
35+
},
36+
)
37+
38+
function Button({
39+
className,
40+
variant,
41+
size,
42+
asChild = false,
43+
...props
44+
}: React.ComponentProps<'button'> &
45+
VariantProps<typeof buttonVariants> & {
46+
asChild?: boolean
47+
}) {
48+
const Comp = asChild ? Slot : 'button'
49+
50+
return (
51+
<Comp
52+
data-slot="button"
53+
className={cn(buttonVariants({ variant, size, className }))}
54+
{...props}
55+
/>
56+
)
57+
}
58+
59+
export { Button, buttonVariants }

‎examples/react/shadcn-basic/src/components/ui/table.tsx

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import * as React from "react"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
function Table({ className, ...props }: React.ComponentProps<"table">) {
6+
return (
7+
<div className="relative w-full overflow-auto">
8+
<table
9+
data-slot="table"
10+
className={cn("w-full caption-bottom text-sm", className)}
11+
{...props}
12+
/>
13+
</div>
14+
)
15+
}
16+
17+
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
18+
return (
19+
<thead
20+
data-slot="table-header"
21+
className={cn("[&_tr]:border-b", className)}
22+
{...props}
23+
/>
24+
)
25+
}
26+
27+
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
28+
return (
29+
<tbody
30+
data-slot="table-body"
31+
className={cn("[&_tr:last-child]:border-0", className)}
32+
{...props}
33+
/>
34+
)
35+
}
36+
37+
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
38+
return (
39+
<tfoot
40+
data-slot="table-footer"
41+
className={cn(
42+
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
43+
className
44+
)}
45+
{...props}
46+
/>
47+
)
48+
}
49+
50+
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
51+
return (
52+
<tr
53+
data-slot="table-row"
54+
className={cn(
55+
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
56+
className
57+
)}
58+
{...props}
59+
/>
60+
)
61+
}
62+
63+
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
64+
return (
65+
<th
66+
data-slot="table-head"
67+
className={cn(
68+
"text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
69+
className
70+
)}
71+
{...props}
72+
/>
73+
)
74+
}
75+
76+
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
77+
return (
78+
<td
79+
data-slot="table-cell"
80+
className={cn(
81+
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
82+
className
83+
)}
84+
{...props}
85+
/>
86+
)
87+
}
88+
89+
function TableCaption({
90+
className,
91+
...props
92+
}: React.ComponentProps<"caption">) {
93+
return (
94+
<caption
95+
data-slot="table-caption"
96+
className={cn("text-muted-foreground mt-4 text-sm", className)}
97+
{...props}
98+
/>
99+
)
100+
}
101+
102+
export {
103+
Table,
104+
TableHeader,
105+
TableBody,
106+
TableFooter,
107+
TableHead,
108+
TableRow,
109+
TableCell,
110+
TableCaption,
111+
}

‎examples/react/shadcn-basic/src/index.css

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@import 'tailwindcss' source('../');
2+
3+
@plugin 'tailwindcss-animate';
4+
5+
@custom-variant dark (&:is(.dark *));
6+
7+
:root {
8+
--background: hsl(0 0% 100%);
9+
--foreground: hsl(240 10% 3.9%);
10+
--card: hsl(0 0% 100%);
11+
--card-foreground: hsl(240 10% 3.9%);
12+
--popover: hsl(0 0% 100%);
13+
--popover-foreground: hsl(240 10% 3.9%);
14+
--primary: hsl(240 5.9% 10%);
15+
--primary-foreground: hsl(0 0% 98%);
16+
--secondary: hsl(240 4.8% 95.9%);
17+
--secondary-foreground: hsl(240 5.9% 10%);
18+
--muted: hsl(240 4.8% 95.9%);
19+
--muted-foreground: hsl(240 3.8% 46.1%);
20+
--accent: hsl(240 4.8% 95.9%);
21+
--accent-foreground: hsl(240 5.9% 10%);
22+
--destructive: hsl(0 84.2% 60.2%);
23+
--destructive-foreground: hsl(0 0% 98%);
24+
--border: hsl(240 5.9% 90%);
25+
--input: hsl(240 5.9% 90%);
26+
--ring: hsl(240 10% 3.9%);
27+
--chart-1: hsl(12 76% 61%);
28+
--chart-2: hsl(173 58% 39%);
29+
--chart-3: hsl(197 37% 24%);
30+
--chart-4: hsl(43 74% 66%);
31+
--chart-5: hsl(27 87% 67%);
32+
--radius: 0.6rem;
33+
}
34+
35+
.dark {
36+
--background: hsl(240 10% 3.9%);
37+
--foreground: hsl(0 0% 98%);
38+
--card: hsl(240 10% 3.9%);
39+
--card-foreground: hsl(0 0% 98%);
40+
--popover: hsl(240 10% 3.9%);
41+
--popover-foreground: hsl(0 0% 98%);
42+
--primary: hsl(0 0% 98%);
43+
--primary-foreground: hsl(240 5.9% 10%);
44+
--secondary: hsl(240 3.7% 15.9%);
45+
--secondary-foreground: hsl(0 0% 98%);
46+
--muted: hsl(240 3.7% 15.9%);
47+
--muted-foreground: hsl(240 5% 64.9%);
48+
--accent: hsl(240 3.7% 15.9%);
49+
--accent-foreground: hsl(0 0% 98%);
50+
--destructive: hsl(0 62.8% 30.6%);
51+
--destructive-foreground: hsl(0 0% 98%);
52+
--border: hsl(240 3.7% 15.9%);
53+
--input: hsl(240 3.7% 15.9%);
54+
--ring: hsl(240 4.9% 83.9%);
55+
--chart-1: hsl(220 70% 50%);
56+
--chart-2: hsl(160 60% 45%);
57+
--chart-3: hsl(30 80% 55%);
58+
--chart-4: hsl(280 65% 60%);
59+
--chart-5: hsl(340 75% 55%);
60+
}
61+
62+
@theme inline {
63+
--color-background: var(--background);
64+
--color-foreground: var(--foreground);
65+
--color-card: var(--card);
66+
--color-card-foreground: var(--card-foreground);
67+
--color-popover: var(--popover);
68+
--color-popover-foreground: var(--popover-foreground);
69+
--color-primary: var(--primary);
70+
--color-primary-foreground: var(--primary-foreground);
71+
--color-secondary: var(--secondary);
72+
--color-secondary-foreground: var(--secondary-foreground);
73+
--color-muted: var(--muted);
74+
--color-muted-foreground: var(--muted-foreground);
75+
--color-accent: var(--accent);
76+
--color-accent-foreground: var(--accent-foreground);
77+
--color-destructive: var(--destructive);
78+
--color-destructive-foreground: var(--destructive-foreground);
79+
--color-border: var(--border);
80+
--color-input: var(--input);
81+
--color-ring: var(--ring);
82+
--color-chart-1: var(--chart-1);
83+
--color-chart-2: var(--chart-2);
84+
--color-chart-3: var(--chart-3);
85+
--color-chart-4: var(--chart-4);
86+
--color-chart-5: var(--chart-5);
87+
--radius-sm: calc(var(--radius) - 4px);
88+
--radius-md: calc(var(--radius) - 2px);
89+
--radius-lg: var(--radius);
90+
--radius-xl: calc(var(--radius) + 4px);
91+
}
92+
93+
@layer base {
94+
* {
95+
@apply border-border outline-ring/50;
96+
}
97+
body {
98+
@apply bg-background text-foreground;
99+
}
100+
}

0 commit comments

Comments
 (0)