start on svelte tableHelper

TanStack · Nov 14, 2024 · 6a318e3 · 6a318e3
1 parent a5faaa4
commit 6a318e3
Show file tree

Hide file tree

Showing 15 changed files with 344 additions and 6 deletions.
diff --git a/examples/svelte/basic-table-helper/.gitignore b/examples/svelte/basic-table-helper/.gitignore
@@ -0,0 +1,8 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+src/**/*.d.ts
+src/**/*.map
diff --git a/examples/svelte/basic-table-helper/README.md b/examples/svelte/basic-table-helper/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/svelte/basic-table-helper/index.html b/examples/svelte/basic-table-helper/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/svelte/basic-table-helper/package.json b/examples/svelte/basic-table-helper/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "tanstack-table-example-svelte-basic-table-helper",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "test:types": "svelte-check --tsconfig ./tsconfig.json",
+    "lint": "eslint ./src"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^6.0.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tanstack/svelte-table": "^9.0.0-alpha.10",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte": "^5.1.16",
+    "svelte-check": "^4.0.7",
+    "typescript": "5.6.3",
+    "vite": "^5.4.11"
+  }
+}
diff --git a/examples/svelte/basic-table-helper/src/App.svelte b/examples/svelte/basic-table-helper/src/App.svelte
@@ -0,0 +1,154 @@
+<script lang="ts">
+  import {
+    createTableHelper,
+    FlexRender,
+  } from '@tanstack/svelte-table'
+  import './index.css'
+
+  // This example uses the new `createTableHelper` method to create a re-usable table helper object instead of independently using the standalone `createTable` hook and `createColumnHelper` method. You can choose to use either way.
+
+  // 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 data: 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,
+    },
+  ]
+
+  // 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 tableHelper = createTableHelper({
+    _features: {},
+    _rowModels: {}, // client-side row models. `Core` row model is now included by default, but you can still override it here
+    _processingFns: {}, // client-side processing functions used by the row models (sorting, filtering, etc.). Not needed in this basic example
+    TData: {} as Person,
+    debugTable: true,
+  })
+
+  // 4. Create a helper object to help define our columns
+  const { columnHelper } = tableHelper
+
+  // 5. Define the columns for your table with a stable reference (in this case, defined statically outside of a react component)
+  const columns = columnHelper.columns([
+    // accessorKey method (most common for simple use-cases)
+    columnHelper.accessor('firstName', {
+      cell: (info) => info.getValue(),
+      footer: (info) => info.column.id,
+    }),
+    // accessorFn used (alternative) along with a custom id
+    columnHelper.accessor((row) => row.lastName, {
+      id: 'lastName',
+      cell: (info) => info.getValue(),
+      header: () => 'Last Name',
+      footer: (info) => info.column.id,
+    }),
+    // accessorFn used to transform the data
+    columnHelper.accessor((row) => Number(row.age), {
+      id: 'age',
+      header: () => 'Age',
+      cell: (info) => info.renderValue(),
+      footer: (info) => info.column.id,
+    }),
+    columnHelper.accessor('visits', {
+      header: () => 'Visits',
+      footer: (info) => info.column.id,
+    }),
+    columnHelper.accessor('status', {
+      header: 'Status',
+      footer: (info) => info.column.id,
+    }),
+    columnHelper.accessor('progress', {
+      header: 'Profile Progress',
+      footer: (info) => info.column.id,
+    }),
+  ])
+
+  // 7. Create the table instance with the required columns and data.
+  // Features and row models are already defined in the table helper object above
+  const table = tableHelper.createTable({
+    columns,
+    data,
+    // add additional table options here or in the table helper above
+  })
+</script>
+
+<div class="p-2">
+  <table>
+    <thead>
+      {#each table.getHeaderGroups() as headerGroup}
+        <tr>
+          {#each headerGroup.headers as header}
+            <th>
+              {#if !header.isPlaceholder}
+                <FlexRender
+                  content={header.column.columnDef.header}
+                  context={header.getContext()}
+                />
+              {/if}
+            </th>
+          {/each}
+        </tr>
+      {/each}
+    </thead>
+    <tbody>
+      {#each table.getRowModel().rows as row}
+        <tr>
+          {#each row.getAllCells() as cell}
+            <td>
+              <FlexRender
+                content={cell.column.columnDef.cell}
+                context={cell.getContext()}
+              />
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+    <tfoot>
+      {#each table.getFooterGroups() as footerGroup}
+        <tr>
+          {#each footerGroup.headers as header}
+            <th>
+              {#if !header.isPlaceholder}
+                <FlexRender
+                  content={header.column.columnDef.footer}
+                  context={header.getContext()}
+                />
+              {/if}
+            </th>
+          {/each}
+        </tr>
+      {/each}
+    </tfoot>
+  </table>
+  <div class="h-4"></div>
+</div>
diff --git a/examples/svelte/basic-table-helper/src/index.css b/examples/svelte/basic-table-helper/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/svelte/basic-table-helper/src/main.ts b/examples/svelte/basic-table-helper/src/main.ts
@@ -0,0 +1,9 @@
+// @ts-ignore
+import { mount } from 'svelte'
+import App from './App.svelte'
+
+const app = mount(App, {
+  target: document.getElementById('root')!,
+})
+
+export default app
diff --git a/examples/svelte/basic-table-helper/svelte.config.js b/examples/svelte/basic-table-helper/svelte.config.js
@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  preprocess: vitePreprocess(),
+}
diff --git a/examples/svelte/basic-table-helper/tsconfig.json b/examples/svelte/basic-table-helper/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/examples/svelte/basic-table-helper/vite.config.js b/examples/svelte/basic-table-helper/vite.config.js
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import rollupReplace from '@rollup/plugin-replace'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    rollupReplace({
+      preventAssignment: true,
+      values: {
+        __DEV__: JSON.stringify(true),
+        'process.env.NODE_ENV': JSON.stringify('development'),
+      },
+    }),
+    svelte(),
+  ],
+})
diff --git a/packages/react-table/src/tableHelper.ts → ...ages/react-table/src/createTableHelper.ts b/packages/react-table/src/tableHelper.ts → ...ages/react-table/src/createTableHelper.ts
@@ -16,7 +16,7 @@ export type TableHelper<
   useTable: (
     tableOptions: Omit<
       TableOptions<TFeatures, TData>,
-      '_features' | '_rowModels'
+      '_features' | '_rowModels' | '_processingFns'
     >,
   ) => Table<TFeatures, TData>
 }

diff --git a/packages/react-table/src/index.ts b/packages/react-table/src/index.ts
@@ -1,5 +1,5 @@
 export * from '@tanstack/table-core'
 
-export * from './useTable'
 export * from './FlexRender'
-export * from './tableHelper'
+export * from './createTableHelper'
+export * from './useTable'
diff --git a/packages/svelte-table/src/createTableHelper.ts b/packages/svelte-table/src/createTableHelper.ts
@@ -0,0 +1,62 @@
+import { constructTableHelper } from '@tanstack/table-core'
+import { createTable } from './createTable.svelte'
+import type {
+  RowData,
+  Table,
+  TableFeatures,
+  TableHelperOptions,
+  TableHelper_Core,
+  TableOptions,
+} from '@tanstack/table-core'
+
+export type TableHelper<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+> = Omit<TableHelper_Core<TFeatures, TData>, 'tableCreator'> & {
+  createTable: (
+    tableOptions: Omit<
+      TableOptions<TFeatures, TData>,
+      '_features' | '_rowModels' | '_processingFns'
+    >,
+  ) => Table<TFeatures, TData>
+}
+
+export function createTableHelper<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+>(
+  tableHelperOptions: TableHelperOptions<TFeatures, TData>,
+): TableHelper<TFeatures, TData> {
+  const tableHelper = constructTableHelper(createTable, tableHelperOptions)
+  return {
+    ...tableHelper,
+    createTable: tableHelper.tableCreator,
+  }
+}
+
+// test
+
+// type Person = {
+//   firstName: string
+//   lastName: string
+//   age: number
+// }
+
+// const tableHelper = createTableHelper({
+//   _features: { rowSelectionFeature: {} },
+//   TData: {} as Person,
+// })
+
+// const columns = tableHelper.columnHelper.columns([
+//   tableHelper.columnHelper.accessor('firstName', { header: 'First Name' }),
+//   tableHelper.columnHelper.accessor('lastName', { header: 'Last Name' }),
+//   tableHelper.columnHelper.accessor('age', { header: 'Age' }),
+//   tableHelper.columnHelper.display({ header: 'Actions', id: 'actions' }),
+// ])
+
+// const data: Array<Person> = []
+
+// tableHelper.createTable({
+//   columns,
+//   data,
+// })
diff --git a/packages/svelte-table/src/index.ts b/packages/svelte-table/src/index.ts
@@ -1,6 +1,7 @@
 export * from '@tanstack/table-core'
 
-export { default as FlexRender } from './FlexRender.svelte'
-export { renderComponent } from './render-component'
 export { createTable } from './createTable.svelte'
+export { createTableHelper } from './createTableHelper'
 export { createTableState } from './createTableState.svelte'
+export { default as FlexRender } from './FlexRender.svelte'
+export { renderComponent } from './render-component'
diff --git a/packages/table-core/src/helpers/tableHelper.ts b/packages/table-core/src/helpers/tableHelper.ts
@@ -30,7 +30,7 @@ export type TableHelper_Core<
   tableCreator: (
     tableOptions: Omit<
       TableOptions<TFeatures, TData>,
-      '_features' | '_rowModels'
+      '_features' | '_rowModels' | '_processingFns'
     >,
   ) => Table<TFeatures, TData>
 }