docs: Added Vanilla examples (basic + pagination) (#5853)

Co-authored-by: Kevin Van Cott <[email protected]>
TanStack · Dec 31, 2024 · e93729a · e93729a
1 parent a55ea5d
commit e93729a
Show file tree

Hide file tree

Showing 22 changed files with 1,201 additions and 304 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -734,6 +734,15 @@
               "label": "Virtualized Rows"
             }
           ]
+        },
+        {
+          "label": "vanilla",
+          "children": [
+            {
+              "to": "framework/vanilla/examples/basic",
+              "label": "Basic"
+            }
+          ]
         }
       ]
     }

diff --git a/examples/vanilla/basic/.gitignore b/examples/vanilla/basic/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/vanilla/basic/README.md b/examples/vanilla/basic/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/vanilla/basic/index.html b/examples/vanilla/basic/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root" class="p-2">
+      <div id="wrapper"></div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vanilla/basic/package.json b/examples/vanilla/basic/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "tanstack-table-example-vanilla-basic",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.7",
+    "typescript": "5.4.5",
+    "vite": "^5.3.2"
+  },
+  "dependencies": {
+    "@tanstack/table-core": "^8.20.5",
+    "nanostores": "^0.11.3"
+  }
+}
diff --git a/examples/vanilla/basic/src/index.css b/examples/vanilla/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/vanilla/basic/src/main.ts b/examples/vanilla/basic/src/main.ts
@@ -0,0 +1,139 @@
+import './index.css'
+
+import {
+  createColumnHelper,
+  getCoreRowModel,
+} from '@tanstack/table-core'
+
+import { flexRender, useTable } from './useTable'
+
+type Person = {
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  status: string
+  progress: number
+}
+
+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,
+  },
+]
+
+const columnHelper = createColumnHelper<Person>()
+
+const columns = [
+  columnHelper.accessor('firstName', {
+    cell: info => info.getValue(),
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor(row => row.lastName, {
+    id: 'lastName',
+    cell: info => `<i>${info.getValue()}</i>`,
+    header: () => '<span>Last Name</span>',
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('age', {
+    header: () => 'Age',
+    cell: info => info.renderValue(),
+    footer: info => info.column.id,
+  }),
+  columnHelper.accessor('visits', {
+    header: () => '<span>Visits</span>',
+    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,
+  }),
+]
+
+const renderTable = () => {
+
+  // Create table elements
+  const tableElement = document.createElement('table')
+  const theadElement = document.createElement('thead')
+  const tbodyElement = document.createElement('tbody')
+  const tfootElement = document.createElement('tfoot')
+
+  tableElement.appendChild(theadElement)
+  tableElement.appendChild(tbodyElement)
+  tableElement.appendChild(tfootElement)
+
+  // Render table headers
+  table.getHeaderGroups().forEach((headerGroup) => {
+    const trElement = document.createElement('tr')
+    headerGroup.headers.forEach((header) => {
+      const thElement = document.createElement('th')
+      thElement.innerHTML = header.isPlaceholder
+        ? ''
+        : flexRender(header.column.columnDef.header, header.getContext())
+        trElement.appendChild(thElement)
+    })
+    theadElement.appendChild(trElement)
+  })
+
+  // Render table rows
+  table.getRowModel().rows.forEach((row) => {
+    const trElement = document.createElement('tr')
+    row.getVisibleCells().forEach((cell) => {
+      const tdElement = document.createElement('td')
+      tdElement.innerHTML = flexRender(cell.column.columnDef.cell, cell.getContext())
+      trElement.appendChild(tdElement)
+    })
+    tbodyElement.appendChild(trElement)
+  })
+
+  // Render table footers
+  table.getFooterGroups().forEach((footerGroup) => {
+    const trElement = document.createElement('tr')
+    footerGroup.headers.forEach((header) => {
+      const thElement = document.createElement('th')
+      thElement.innerHTML = header.isPlaceholder
+        ? ''
+        : flexRender(header.column.columnDef.footer, header.getContext())
+        trElement.appendChild(thElement)
+    })
+    tfootElement.appendChild(trElement)
+  })
+
+  // Clear previous content and append new content
+  const wrapperElement = document.getElementById('wrapper') as HTMLDivElement
+  wrapperElement.innerHTML = ''
+  wrapperElement.appendChild(tableElement)
+}
+
+const table = useTable<Person>({
+  data,
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+})
+
+renderTable()
diff --git a/examples/vanilla/basic/src/useTable.ts b/examples/vanilla/basic/src/useTable.ts
@@ -0,0 +1,55 @@
+import { atom } from 'nanostores'
+
+import {
+  type RowData,
+  type TableOptions,
+  type TableOptionsResolved,
+  createTable,
+} from '@tanstack/table-core'
+
+export const flexRender = <TProps extends object>(comp: any, props: TProps) => {
+  if (typeof comp === 'function') {
+    return comp(props)
+  }
+  return comp
+}
+
+export const useTable = <TData extends RowData>(options: TableOptions<TData>) => {
+  // Compose in the generic options to the user options
+  const resolvedOptions: TableOptionsResolved<TData> = {
+    state: {}, // Dummy state
+    onStateChange: () => {}, // noop
+    renderFallbackValue: null,
+    ...options,
+  }
+
+  // Create a new table
+  const table = createTable<TData>(resolvedOptions)
+
+  // By default, manage table state here using the table's initial state
+  const state = atom(table.initialState)
+
+  // Subscribe to state changes
+  state.subscribe((currentState) => {
+    table.setOptions((prev) => ({
+      ...prev,
+      ...options,
+      state: {
+        ...currentState,
+        ...options.state,
+      },
+      // Similarly, we'll maintain both our internal state and any user-provided state
+      onStateChange: (updater) => {
+        if (typeof updater === 'function') {
+          const newState = updater(currentState)
+          state.set(newState)
+        } else {
+          state.set(updater)
+        }
+        options.onStateChange?.(updater)
+      },
+    }))
+  })
+
+  return table
+}
diff --git a/examples/vanilla/basic/tsconfig.json b/examples/vanilla/basic/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "emitDecoratorMetadata": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/vanilla/basic/vite.config.js b/examples/vanilla/basic/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+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'),
+      },
+    }),
+  ],
+})
diff --git a/examples/vanilla/pagination/.gitignore b/examples/vanilla/pagination/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/vanilla/pagination/README.md b/examples/vanilla/pagination/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/vanilla/pagination/index.html b/examples/vanilla/pagination/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root" class="p-2">
+      <div id="wrapper"></div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vanilla/pagination/package.json b/examples/vanilla/pagination/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "tanstack-table-example-vanilla-pagination",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.7",
+    "typescript": "5.4.5",
+    "vite": "^5.3.2"
+  },
+  "dependencies": {
+    "@tanstack/table-core": "^8.20.5",
+    "nanostores": "^0.11.3"
+  }
+}