TanStack · KevinVandy · Jan 5, 2025 · Jan 5, 2025 · Jan 5, 2025
diff --git a/examples/preact/basic/.gitignore b/examples/preact/basic/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/preact/basic/README.md b/examples/preact/basic/README.md
@@ -0,0 +1,15 @@
+# `create-preact`
+
+<h2 align="center">
+  <img height="256" width="256" src="./src/assets/preact.svg">
+</h2>
+
+<h3 align="center">Get started using Preact and Vite!</h3>
+
+## Getting Started
+
+- `npm run dev` - Starts a dev server at http://localhost:5173/
+
+- `npm run build` - Builds for production, emitting to `dist/`
+
+- `npm run preview` - Starts a server at http://localhost:4173/ to test production build locally
diff --git a/examples/preact/basic/index.html b/examples/preact/basic/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Vite + Preact</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/preact/basic/package.json b/examples/preact/basic/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "tanstack-table-example-preact-basic",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite",
+    "lint": "eslint ./src"
+  },
+  "dependencies": {
+    "@tanstack/preact-table": "^9.0.0-alpha.10",
+    "preact": "^10.25.3"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.9.3",
+    "typescript": "5.6.3",
+    "vite": "^5.4.11"
+  }
+}
diff --git a/examples/preact/basic/public/vite.svg b/examples/preact/basic/public/vite.svg
diff --git a/examples/preact/basic/src/index.css b/examples/preact/basic/src/index.css
@@ -0,0 +1,26 @@
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+table {
+  border: 1px solid lightgray;
+}
+
+tbody {
+  border-bottom: 1px solid lightgray;
+}
+
+th {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+}
+
+tfoot {
+  color: gray;
+}
+
+tfoot th {
+  font-weight: normal;
+}
diff --git a/examples/preact/basic/src/main.tsx b/examples/preact/basic/src/main.tsx
@@ -0,0 +1,166 @@
+import { render } from 'preact'
+import { useReducer, useState } from 'preact/hooks'
+import { flexRender, tableFeatures, useTable } from '@tanstack/preact-table'
+import type { ColumnDef } from '@tanstack/preact-table'
+import './index.css'
+
+// This example uses the classic standalone `useTable` hook to create a table without the new `createTableHelper` util.
+
+// 1. Define what the shape of your data will be for each row
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+}
+
+// 2. Create some dummy data with a stable reference (this could be an API response stored in useState or similar)
+const defaultData: Array<Person> = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 24,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'tandy',
+    lastName: 'miller',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'dirte',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+  {
+    firstName: 'kevin',
+    lastName: 'vandy',
+    age: 12,
+    visits: 100,
+    status: 'Single',
+    progress: 70,
+  },
+]
+
+// 3. New in V9! Tell the table which features and row models we want to use. In this case, this will be a basic table with no additional features
+const _features = tableFeatures({}) // util method to create sharable TFeatures object/type
+
+// 4. Define the columns for your table. This uses the new `ColumnDef` type to define columns. Alternatively, check out the createTableHelper/createColumnHelper util for an even more type-safe way to define columns.
+const columns: Array<ColumnDef<typeof _features, Person>> = [
+  {
+    accessorKey: 'firstName', // accessorKey method (most common for simple use-cases)
+    header: 'First Name',
+    cell: (info) => info.getValue(),
+  },
+  {
+    accessorFn: (row) => row.lastName, // accessorFn used (alternative) along with a custom id
+    id: 'lastName',
+    header: () => <span>Last Name</span>,
+    cell: (info) => <i>{info.getValue<string>()}</i>,
+  },
+  {
+    accessorFn: (row) => Number(row.age), // accessorFn used to transform the data
+    id: 'age',
+    header: () => 'Age',
+    cell: (info) => {
+      return info.renderValue()
+    },
+  },
+  {
+    accessorKey: 'visits',
+    header: () => <span>Visits</span>,
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+  },
+  {
+    accessorKey: 'progress',
+    header: 'Profile Progress',
+  },
+]
+
+function App() {
+  // 5. Store data with a stable reference
+  const [data, _setData] = useState(() => [...defaultData])
+  const rerender = useReducer(() => ({}), {})[1]
+
+  // 6. Create the table instance with required _features, columns, and data
+  const table = useTable({
+    _features, // new required option in V9. Tell the table which features you are importing and using (better tree-shaking)
+    _rowModels: {}, // `Core` row model is now included by default, but you can still override it here
+    columns,
+    data,
+    // add additional table options here
+  })
+
+  // 7. Render your table markup from the table instance APIs
+  return (
+    <div className="p-2">
+      <table>
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row) => (
+            <tr key={row.id}>
+              {row.getAllCells().map((cell) => (
+                <td key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+        <tfoot>
+          {table.getFooterGroups().map((footerGroup) => (
+            <tr key={footerGroup.id}>
+              {footerGroup.headers.map((header) => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.footer,
+                        header.getContext(),
+                      )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </tfoot>
+      </table>
+      <div className="h-4" />
+      <button onClick={() => rerender(0)} className="border p-2">
+        Rerender
+      </button>
+    </div>
+  )
+}
+
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Failed to find the root element')
+
+render(<App />, rootElement)
diff --git a/examples/preact/basic/tsconfig.json b/examples/preact/basic/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "strictNullChecks": true,
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "allowJs": true,
+    "checkJs": true,
+
+    /* Preact Config */
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "skipLibCheck": true,
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    }
+  },
+  "include": ["node_modules/vite/client.d.ts", "**/*"]
+}
diff --git a/examples/preact/basic/vite.config.ts b/examples/preact/basic/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [preact()],
+})
diff --git a/examples/preact/sorting/.gitignore b/examples/preact/sorting/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/preact/sorting/README.md b/examples/preact/sorting/README.md
@@ -0,0 +1,15 @@
+# `create-preact`
+
+<h2 align="center">
+  <img height="256" width="256" src="./src/assets/preact.svg">
+</h2>
+
+<h3 align="center">Get started using Preact and Vite!</h3>
+
+## Getting Started
+
+- `npm run dev` - Starts a dev server at http://localhost:5173/
+
+- `npm run build` - Builds for production, emitting to `dist/`
+
+- `npm run preview` - Starts a server at http://localhost:4173/ to test production build locally
diff --git a/examples/preact/sorting/index.html b/examples/preact/sorting/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Vite + Preact</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/preact/sorting/package.json b/examples/preact/sorting/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "tanstack-table-example-preact-sorting",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite",
+    "lint": "eslint ./src"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^9.3.0",
+    "@tanstack/preact-table": "^9.0.0-alpha.10",
+    "preact": "^10.25.3"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.9.3",
+    "typescript": "5.6.3",
+    "vite": "^5.4.11"
+  }
+}