feat: Fixing & adding new (Tanstack) table examples.

.changeset/loose-grapes-bake.md

@@ -0,0 +1,5 @@
+---
+'@example/ui-playground': patch
+---
+
+feat: add separator variant & examples.

.changeset/wicked-frogs-live.md

@@ -0,0 +1,5 @@
+---
+'@example/ui-playground': patch
+---
+
+feat: add new tanstack table component examples.

.vscode/settings.json

@@ -56,5 +56,6 @@
   ],
   "[sql]": {
     "editor.defaultFormatter": "adpyke.vscode-sql-formatter"
-  }
+  },
+  "typescript.experimental.useTsgo": false
 }

examples/ui-playground/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0-alpha.78",
   "private": true,
   "scripts": {
-    "dev": "NODE_OPTIONS='--inspect' next dev --port 3003 --turbopack",
+    "dev": "NODE_OPTIONS='--inspect' next dev --port 3004 --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "eslint .",
@@ -20,6 +20,7 @@
     "@phosphor-icons/react": "^2.1.8",
     "@tailwindcss/postcss": "^4.1.7",
     "@tanstack/react-query": "^5.71.5",
+    "@tanstack/react-table": "^8.21.3",
     "@tiptap/extension-color": "^2.26.3",
     "@tiptap/extension-link": "2.26.3",
     "@tiptap/extension-text-align": "^2.26.3",

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

@@ -27,9 +27,11 @@ const navigationItems = [
   { href: '#link', label: 'Link' },
   { href: '#pagination', label: 'Pagination' },
   { href: '#progress', label: 'Progress' },
+  { href: '#separator', label: 'Separator' },
   { href: '#select', label: 'Select' },
   { href: '#slider', label: 'Slider' },
   { href: '#switch', label: 'Switch' },
+  { href: '#table', label: 'Table' },
   { href: '#tabs', label: 'Tabs' },
   { href: '#tooltip', label: 'Tooltip' },
   { href: '#dropdown-menu', label: 'Dropdown Menu' },

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

@@ -20,8 +20,10 @@ import { PaginationSection } from './pagination-section'
 import { ProgressSection } from './progress-section'
 import { RichTextSection } from './rich-text-section'
 import { SelectSection } from './select-section'
+import { SeparatorSection } from './separator-section'
 import { SliderSection } from './slider-section'
 import { SwitchSection } from './switch-section'
+import { TableSection } from './table-section'
 import { TabsSection } from './tabs-section'
 import { TextareaSection } from './textarea-section'
 import { ToastSection } from './toast-section'
@@ -72,7 +74,7 @@ export default function ComboboxPage() {
         <Typography type="h2" weight="bold" id="input-otp">
           Input OTP
         </Typography>
-        <InputOtpSection />A
+        <InputOtpSection />
         <Typography type="h2" weight="bold" id="link">
           Link
         </Typography>
@@ -93,10 +95,18 @@ export default function ComboboxPage() {
           Slider
         </Typography>
         <SliderSection />
+        <Typography type="h2" weight="bold" id="separator">
+          Separator
+        </Typography>
+        <SeparatorSection />
         <Typography type="h2" weight="bold" id="switch">
           Switch
         </Typography>
         <SwitchSection />
+        <Typography type="h2" weight="bold" id="table">
+          Table
+        </Typography>
+        <TableSection />
         <Typography type="h2" weight="bold" id="tabs">
           Tabs
         </Typography>

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

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import { Separator, Typography } from '@genseki/react/v2'
+
+import { PlaygroundCard } from '~/src/components/card'
+
+function BasicSeparatorExamples() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-muted-foreground">Left content</span>
+        <Separator className="flex-1" />
+        <span className="text-sm text-muted-foreground">Right content</span>
+      </div>
+      <div className="flex h-24 items-center gap-4">
+        <span className="text-sm text-muted-foreground">Top</span>
+        <Separator orientation="vertical" className="h-full" />
+        <span className="text-sm text-muted-foreground">Bottom</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-muted-foreground">Left content</span>
+        <Separator variant="dashed" className="flex-1" />
+        <span className="text-sm text-muted-foreground">Right content</span>
+      </div>
+      <div className="flex h-24 items-center gap-4">
+        <span className="text-sm text-muted-foreground">Top</span>
+        <Separator variant="dashed" orientation="vertical" className="h-full" />
+        <span className="text-sm text-muted-foreground">Bottom</span>
+      </div>
+    </div>
+  )
+}
+
+export function SeparatorSection() {
+  return (
+    <div className="grid gap-8">
+      <PlaygroundCard title="Separator" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Visual dividers for grouping content horizontally or vertically.
+        </Typography>
+        <div className="p-4 bg-secondary w-full rounded-lg">
+          <BasicSeparatorExamples />
+        </div>
+      </PlaygroundCard>
+    </div>
+  )
+}

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

@@ -0,0 +1,241 @@
+import React from 'react'
+
+import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+
+import { TanstackTable } from '@genseki/react'
+import { Typography } from '@genseki/react/v2'
+
+import { PlaygroundCard } from '../../../components/card'
+
+type User = {
+  id: number
+  fname: string
+  lname: string
+  food: string
+}
+
+const columnHelper = createColumnHelper<User>()
+
+const columns = [
+  columnHelper.accessor('id', {
+    header: 'ID',
+    cell: (props) => <p>{props.getValue()}</p>,
+  }),
+  columnHelper.accessor('fname', {
+    header: 'First Name',
+    cell: (props) => <p>{props.getValue()}</p>,
+  }),
+  columnHelper.accessor('lname', {
+    header: 'Last Name',
+    cell: (props) => <p>{props.getValue()}</p>,
+  }),
+  columnHelper.accessor('food', {
+    header: 'Favorite Food',
+    cell: (props) => <p>{props.getValue()}</p>,
+  }),
+]
+
+function BasicTable() {
+  const users: User[] = [
+    {
+      id: 1,
+      fname: 'Supakorn',
+      lname: 'Netsuwan',
+      food: 'Hamburger',
+    },
+    {
+      id: 2,
+      fname: 'Jane',
+      lname: 'Doe',
+      food: 'Pizza',
+    },
+    {
+      id: 3,
+      fname: 'John',
+      lname: 'Smith',
+      food: 'Sushi',
+    },
+    {
+      id: 4,
+      fname: 'Emily',
+      lname: 'Johnson',
+      food: 'Tacos',
+    },
+    {
+      id: 5,
+      fname: 'Michael',
+      lname: 'Brown',
+      food: 'Pasta',
+    },
+  ]
+
+  const table = useReactTable<User>({
+    getCoreRowModel: getCoreRowModel(),
+    data: users,
+    columns,
+  })
+
+  return (
+    <div>
+      <TanstackTable table={table} />
+    </div>
+  )
+}
+
+function SortableTable() {
+  const users: User[] = [
+    {
+      id: 1,
+      fname: 'Supakorn',
+      lname: 'Netsuwan',
+      food: 'Hamburger',
+    },
+    {
+      id: 2,
+      fname: 'Jane',
+      lname: 'Doe',
+      food: 'Pizza',
+    },
+    {
+      id: 3,
+      fname: 'John',
+      lname: 'Smith',
+      food: 'Sushi',
+    },
+    {
+      id: 4,
+      fname: 'Emily',
+      lname: 'Johnson',
+      food: 'Tacos',
+    },
+    {
+      id: 5,
+      fname: 'Michael',
+      lname: 'Brown',
+      food: 'Pasta',
+    },
+  ]
+
+  const table = useReactTable<User>({
+    getCoreRowModel: getCoreRowModel(),
+    data: users,
+    columns,
+  })
+
+  return (
+    <div>
+      <TanstackTable
+        table={table}
+        configuration={{
+          sortBy: [['id'], ['fname'], ['lname'], ['food']],
+        }}
+      />
+    </div>
+  )
+}
+
+function LoadingTable() {
+  const users: User[] = []
+
+  const table = useReactTable<User>({
+    getCoreRowModel: getCoreRowModel(),
+    data: users,
+    columns,
+  })
+
+  return (
+    <div>
+      <TanstackTable table={table} isLoading={true} />
+    </div>
+  )
+}
+
+function EmptyTable() {
+  const users: User[] = []
+
+  const table = useReactTable<User>({
+    getCoreRowModel: getCoreRowModel(),
+    data: users,
+    columns,
+  })
+
+  return (
+    <div>
+      <TanstackTable table={table} />
+    </div>
+  )
+}
+
+function ErrorTable() {
+  const users: User[] = []
+
+  const table = useReactTable<User>({
+    getCoreRowModel: getCoreRowModel(),
+    data: users,
+    columns,
+  })
+
+  return (
+    <div>
+      <TanstackTable
+        table={table}
+        isError={true}
+        errorMessage="Failed to load data. Please try again later."
+      />
+    </div>
+  )
+}
+
+export const TableSection = React.memo(function () {
+  return (
+    <div className="grid gap-8">
+      <PlaygroundCard title="Basic Table" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A simple table with basic data display functionality.
+        </Typography>
+
+        <div className="p-4 bg-background w-full rounded-lg">
+          <BasicTable />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Sortable Table" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Table with sortable columns. Click on column headers to sort.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <SortableTable />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Loading State" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Table displaying a loading state while data is being fetched.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <LoadingTable />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Empty State" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Table displaying an empty state when no data is available.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <EmptyTable />
+        </div>
+      </PlaygroundCard>
+
+      <PlaygroundCard title="Error State" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Table displaying an error state when data fetching fails.
+        </Typography>
+        <div className="p-4 bg-background w-full rounded-lg">
+          <ErrorTable />
+        </div>
+      </PlaygroundCard>
+    </div>
+  )
+})
+
+TableSection.displayName = 'TableSection'