Skip to content

Commit 0978447

Browse files
SupakornNetsuwanSupakornNetsuwan
authored
Merge pull request #289 from softnetics/supakorn/migrate/components
feat: Fixing & adding new (Tanstack) table examples.
2 parents 8f7198d + 6df8d40 commit 0978447

11 files changed

Lines changed: 355 additions & 18 deletions

File tree

‎.changeset/loose-grapes-bake.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@example/ui-playground': patch
3+
---
4+
5+
feat: add separator variant & examples.

‎.changeset/wicked-frogs-live.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@example/ui-playground': patch
3+
---
4+
5+
feat: add new tanstack table component examples.

‎.vscode/settings.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,5 +56,6 @@
5656
],
5757
"[sql]": {
5858
"editor.defaultFormatter": "adpyke.vscode-sql-formatter"
59-
}
59+
},
60+
"typescript.experimental.useTsgo": false
6061
}

‎examples/ui-playground/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.1.0-alpha.78",
44
"private": true,
55
"scripts": {
6-
"dev": "NODE_OPTIONS='--inspect' next dev --port 3003 --turbopack",
6+
"dev": "NODE_OPTIONS='--inspect' next dev --port 3004 --turbopack",
77
"build": "next build",
88
"start": "next start",
99
"lint": "eslint .",
@@ -20,6 +20,7 @@
2020
"@phosphor-icons/react": "^2.1.8",
2121
"@tailwindcss/postcss": "^4.1.7",
2222
"@tanstack/react-query": "^5.71.5",
23+
"@tanstack/react-table": "^8.21.3",
2324
"@tiptap/extension-color": "^2.26.3",
2425
"@tiptap/extension-link": "2.26.3",
2526
"@tiptap/extension-text-align": "^2.26.3",

‎examples/ui-playground/src/app/playground/shadcn/page-sidebar.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,11 @@ const navigationItems = [
2727
{ href: '#link', label: 'Link' },
2828
{ href: '#pagination', label: 'Pagination' },
2929
{ href: '#progress', label: 'Progress' },
30+
{ href: '#separator', label: 'Separator' },
3031
{ href: '#select', label: 'Select' },
3132
{ href: '#slider', label: 'Slider' },
3233
{ href: '#switch', label: 'Switch' },
34+
{ href: '#table', label: 'Table' },
3335
{ href: '#tabs', label: 'Tabs' },
3436
{ href: '#tooltip', label: 'Tooltip' },
3537
{ href: '#dropdown-menu', label: 'Dropdown Menu' },

‎examples/ui-playground/src/app/playground/shadcn/page.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,10 @@ import { PaginationSection } from './pagination-section'
2020
import { ProgressSection } from './progress-section'
2121
import { RichTextSection } from './rich-text-section'
2222
import { SelectSection } from './select-section'
23+
import { SeparatorSection } from './separator-section'
2324
import { SliderSection } from './slider-section'
2425
import { SwitchSection } from './switch-section'
26+
import { TableSection } from './table-section'
2527
import { TabsSection } from './tabs-section'
2628
import { TextareaSection } from './textarea-section'
2729
import { ToastSection } from './toast-section'
@@ -72,7 +74,7 @@ export default function ComboboxPage() {
7274
<Typography type="h2" weight="bold" id="input-otp">
7375
Input OTP
7476
</Typography>
75-
<InputOtpSection />A
77+
<InputOtpSection />
7678
<Typography type="h2" weight="bold" id="link">
7779
Link
7880
</Typography>
@@ -93,10 +95,18 @@ export default function ComboboxPage() {
9395
Slider
9496
</Typography>
9597
<SliderSection />
98+
<Typography type="h2" weight="bold" id="separator">
99+
Separator
100+
</Typography>
101+
<SeparatorSection />
96102
<Typography type="h2" weight="bold" id="switch">
97103
Switch
98104
</Typography>
99105
<SwitchSection />
106+
<Typography type="h2" weight="bold" id="table">
107+
Table
108+
</Typography>
109+
<TableSection />
100110
<Typography type="h2" weight="bold" id="tabs">
101111
Tabs
102112
</Typography>

‎examples/ui-playground/src/app/playground/shadcn/separator-section.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react'
2+
3+
import { Separator, Typography } from '@genseki/react/v2'
4+
5+
import { PlaygroundCard } from '~/src/components/card'
6+
7+
function BasicSeparatorExamples() {
8+
return (
9+
<div className="space-y-6">
10+
<div className="flex items-center gap-4">
11+
<span className="text-sm text-muted-foreground">Left content</span>
12+
<Separator className="flex-1" />
13+
<span className="text-sm text-muted-foreground">Right content</span>
14+
</div>
15+
<div className="flex h-24 items-center gap-4">
16+
<span className="text-sm text-muted-foreground">Top</span>
17+
<Separator orientation="vertical" className="h-full" />
18+
<span className="text-sm text-muted-foreground">Bottom</span>
19+
</div>
20+
<div className="flex items-center gap-4">
21+
<span className="text-sm text-muted-foreground">Left content</span>
22+
<Separator variant="dashed" className="flex-1" />
23+
<span className="text-sm text-muted-foreground">Right content</span>
24+
</div>
25+
<div className="flex h-24 items-center gap-4">
26+
<span className="text-sm text-muted-foreground">Top</span>
27+
<Separator variant="dashed" orientation="vertical" className="h-full" />
28+
<span className="text-sm text-muted-foreground">Bottom</span>
29+
</div>
30+
</div>
31+
)
32+
}
33+
34+
export function SeparatorSection() {
35+
return (
36+
<div className="grid gap-8">
37+
<PlaygroundCard title="Separator" categoryTitle="Component">
38+
<Typography type="body" className="text-muted-foreground mb-4">
39+
Visual dividers for grouping content horizontally or vertically.
40+
</Typography>
41+
<div className="p-4 bg-secondary w-full rounded-lg">
42+
<BasicSeparatorExamples />
43+
</div>
44+
</PlaygroundCard>
45+
</div>
46+
)
47+
}

‎examples/ui-playground/src/app/playground/shadcn/table-section.tsx‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
import React from 'react'
2+
3+
import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
4+
5+
import { TanstackTable } from '@genseki/react'
6+
import { Typography } from '@genseki/react/v2'
7+
8+
import { PlaygroundCard } from '../../../components/card'
9+
10+
type User = {
11+
id: number
12+
fname: string
13+
lname: string
14+
food: string
15+
}
16+
17+
const columnHelper = createColumnHelper<User>()
18+
19+
const columns = [
20+
columnHelper.accessor('id', {
21+
header: 'ID',
22+
cell: (props) => <p>{props.getValue()}</p>,
23+
}),
24+
columnHelper.accessor('fname', {
25+
header: 'First Name',
26+
cell: (props) => <p>{props.getValue()}</p>,
27+
}),
28+
columnHelper.accessor('lname', {
29+
header: 'Last Name',
30+
cell: (props) => <p>{props.getValue()}</p>,
31+
}),
32+
columnHelper.accessor('food', {
33+
header: 'Favorite Food',
34+
cell: (props) => <p>{props.getValue()}</p>,
35+
}),
36+
]
37+
38+
function BasicTable() {
39+
const users: User[] = [
40+
{
41+
id: 1,
42+
fname: 'Supakorn',
43+
lname: 'Netsuwan',
44+
food: 'Hamburger',
45+
},
46+
{
47+
id: 2,
48+
fname: 'Jane',
49+
lname: 'Doe',
50+
food: 'Pizza',
51+
},
52+
{
53+
id: 3,
54+
fname: 'John',
55+
lname: 'Smith',
56+
food: 'Sushi',
57+
},
58+
{
59+
id: 4,
60+
fname: 'Emily',
61+
lname: 'Johnson',
62+
food: 'Tacos',
63+
},
64+
{
65+
id: 5,
66+
fname: 'Michael',
67+
lname: 'Brown',
68+
food: 'Pasta',
69+
},
70+
]
71+
72+
const table = useReactTable<User>({
73+
getCoreRowModel: getCoreRowModel(),
74+
data: users,
75+
columns,
76+
})
77+
78+
return (
79+
<div>
80+
<TanstackTable table={table} />
81+
</div>
82+
)
83+
}
84+
85+
function SortableTable() {
86+
const users: User[] = [
87+
{
88+
id: 1,
89+
fname: 'Supakorn',
90+
lname: 'Netsuwan',
91+
food: 'Hamburger',
92+
},
93+
{
94+
id: 2,
95+
fname: 'Jane',
96+
lname: 'Doe',
97+
food: 'Pizza',
98+
},
99+
{
100+
id: 3,
101+
fname: 'John',
102+
lname: 'Smith',
103+
food: 'Sushi',
104+
},
105+
{
106+
id: 4,
107+
fname: 'Emily',
108+
lname: 'Johnson',
109+
food: 'Tacos',
110+
},
111+
{
112+
id: 5,
113+
fname: 'Michael',
114+
lname: 'Brown',
115+
food: 'Pasta',
116+
},
117+
]
118+
119+
const table = useReactTable<User>({
120+
getCoreRowModel: getCoreRowModel(),
121+
data: users,
122+
columns,
123+
})
124+
125+
return (
126+
<div>
127+
<TanstackTable
128+
table={table}
129+
configuration={{
130+
sortBy: [['id'], ['fname'], ['lname'], ['food']],
131+
}}
132+
/>
133+
</div>
134+
)
135+
}
136+
137+
function LoadingTable() {
138+
const users: User[] = []
139+
140+
const table = useReactTable<User>({
141+
getCoreRowModel: getCoreRowModel(),
142+
data: users,
143+
columns,
144+
})
145+
146+
return (
147+
<div>
148+
<TanstackTable table={table} isLoading={true} />
149+
</div>
150+
)
151+
}
152+
153+
function EmptyTable() {
154+
const users: User[] = []
155+
156+
const table = useReactTable<User>({
157+
getCoreRowModel: getCoreRowModel(),
158+
data: users,
159+
columns,
160+
})
161+
162+
return (
163+
<div>
164+
<TanstackTable table={table} />
165+
</div>
166+
)
167+
}
168+
169+
function ErrorTable() {
170+
const users: User[] = []
171+
172+
const table = useReactTable<User>({
173+
getCoreRowModel: getCoreRowModel(),
174+
data: users,
175+
columns,
176+
})
177+
178+
return (
179+
<div>
180+
<TanstackTable
181+
table={table}
182+
isError={true}
183+
errorMessage="Failed to load data. Please try again later."
184+
/>
185+
</div>
186+
)
187+
}
188+
189+
export const TableSection = React.memo(function () {
190+
return (
191+
<div className="grid gap-8">
192+
<PlaygroundCard title="Basic Table" categoryTitle="Component">
193+
<Typography type="body" className="text-muted-foreground mb-4">
194+
A simple table with basic data display functionality.
195+
</Typography>
196+
197+
<div className="p-4 bg-background w-full rounded-lg">
198+
<BasicTable />
199+
</div>
200+
</PlaygroundCard>
201+
202+
<PlaygroundCard title="Sortable Table" categoryTitle="Component">
203+
<Typography type="body" className="text-muted-foreground mb-4">
204+
Table with sortable columns. Click on column headers to sort.
205+
</Typography>
206+
<div className="p-4 bg-background w-full rounded-lg">
207+
<SortableTable />
208+
</div>
209+
</PlaygroundCard>
210+
211+
<PlaygroundCard title="Loading State" categoryTitle="Component">
212+
<Typography type="body" className="text-muted-foreground mb-4">
213+
Table displaying a loading state while data is being fetched.
214+
</Typography>
215+
<div className="p-4 bg-background w-full rounded-lg">
216+
<LoadingTable />
217+
</div>
218+
</PlaygroundCard>
219+
220+
<PlaygroundCard title="Empty State" categoryTitle="Component">
221+
<Typography type="body" className="text-muted-foreground mb-4">
222+
Table displaying an empty state when no data is available.
223+
</Typography>
224+
<div className="p-4 bg-background w-full rounded-lg">
225+
<EmptyTable />
226+
</div>
227+
</PlaygroundCard>
228+
229+
<PlaygroundCard title="Error State" categoryTitle="Component">
230+
<Typography type="body" className="text-muted-foreground mb-4">
231+
Table displaying an error state when data fetching fails.
232+
</Typography>
233+
<div className="p-4 bg-background w-full rounded-lg">
234+
<ErrorTable />
235+
</div>
236+
</PlaygroundCard>
237+
</div>
238+
)
239+
})
240+
241+
TableSection.displayName = 'TableSection'

0 commit comments

Comments
 (0)