fix some svelte and solid examples

TanStack · Nov 18, 2024 · 581f621 · 581f621
1 parent f5cb60c
commit 581f621
Show file tree

Hide file tree

Showing 21 changed files with 507 additions and 66 deletions.
diff --git a/examples/solid/column-groups/src/App.tsx b/examples/solid/column-groups/src/App.tsx
@@ -131,7 +131,7 @@ function App() {
           <For each={table.getRowModel().rows}>
             {(row) => (
               <tr>
-                <For each={row.getVisibleCells()}>
+                <For each={row.getAllCells()}>
                   {(cell) => (
                     <td>
                       {flexRender(

diff --git a/examples/solid/column-ordering/src/App.tsx b/examples/solid/column-ordering/src/App.tsx
@@ -2,6 +2,7 @@ import { For, Show, createSignal } from 'solid-js'
 import { faker } from '@faker-js/faker'
 import {
   columnOrderingFeature,
+  columnVisibilityFeature,
   createTable,
   flexRender,
   tableFeatures,
@@ -14,7 +15,10 @@ import type {
   ColumnVisibilityState,
 } from '@tanstack/solid-table'
 
-const _features = tableFeatures({ columnOrderingFeature })
+const _features = tableFeatures({
+  columnOrderingFeature,
+  columnVisibilityFeature,
+})
 
 const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {

diff --git a/examples/solid/filters-faceted/.gitignore b/examples/solid/filters-faceted/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/examples/solid/filters-faceted/README.md b/examples/solid/filters-faceted/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/solid/filters-faceted/index.html b/examples/solid/filters-faceted/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Solid App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/examples/solid/filters-faceted/package.json b/examples/solid/filters-faceted/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "tanstack-table-example-solid-filters-faceted",
+  "version": "0.0.0",
+  "description": "",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint ./src"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@faker-js/faker": "^9.2.0",
+    "typescript": "5.6.3",
+    "vite": "^5.4.11",
+    "vite-plugin-solid": "^2.10.2"
+  },
+  "dependencies": {
+    "@solid-primitives/scheduled": "^1.4.4",
+    "@tanstack/solid-table": "^9.0.0-alpha.10",
+    "solid-js": "^1.9.3"
+  }
+}
diff --git a/examples/solid/filters-faceted/src/App.tsx b/examples/solid/filters-faceted/src/App.tsx
@@ -0,0 +1,184 @@
+import {
+  columnFacetingFeature,
+  columnFilteringFeature,
+  createFacetedMinMaxValues,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createTable,
+  flexRender,
+  globalFilteringFeature,
+  tableFeatures,
+} from '@tanstack/solid-table'
+import { debounce } from '@solid-primitives/scheduled'
+import { For, createSignal } from 'solid-js'
+import { makeData } from './makeData'
+import ColumnFilter from './ColumnFilter'
+import type { Person } from './makeData'
+import type { ColumnDef, ColumnFiltersState } from '@tanstack/solid-table'
+
+const _features = tableFeatures({
+  columnFilteringFeature,
+  globalFilteringFeature,
+  columnFacetingFeature,
+})
+
+const columns: Array<ColumnDef<typeof _features, Person>> = [
+  {
+    header: 'Name',
+    footer: (props) => props.column.id,
+    columns: [
+      {
+        accessorKey: 'firstName',
+        cell: (info) => info.getValue(),
+        footer: (props) => props.column.id,
+      },
+      {
+        accessorFn: (row) => row.lastName,
+        id: 'lastName',
+        cell: (info) => info.getValue(),
+        header: () => <span>Last Name</span>,
+        footer: (props) => props.column.id,
+      },
+    ],
+  },
+  {
+    header: 'Info',
+    footer: (props) => props.column.id,
+    columns: [
+      {
+        accessorKey: 'age',
+        header: () => 'Age',
+        footer: (props) => props.column.id,
+      },
+      {
+        header: 'More Info',
+        columns: [
+          {
+            accessorKey: 'visits',
+            header: () => <span>Visits</span>,
+            footer: (props) => props.column.id,
+          },
+          {
+            accessorKey: 'status',
+            header: 'Status',
+            footer: (props) => props.column.id,
+          },
+          {
+            accessorKey: 'progress',
+            header: 'Profile Progress',
+            footer: (props) => props.column.id,
+          },
+        ],
+      },
+    ],
+  },
+]
+
+function App() {
+  const [data, setData] = createSignal(makeData(1_000))
+  const [columnFilters, setColumnFilters] = createSignal<ColumnFiltersState>([])
+  const [globalFilter, setGlobalFilter] = createSignal('')
+  const debounceSetGlobalFilter = debounce(
+    (value: string) => setGlobalFilter(value),
+    500,
+  )
+  const refreshData = () => setData(makeData(50_000)) // stress test
+
+  const table = createTable({
+    _features,
+    _rowModels: {
+      facetedRowModel: createFacetedRowModel(),
+      facetedMinMaxValues: createFacetedMinMaxValues(),
+      facetedUniqueValues: createFacetedUniqueValues(),
+      filteredRowModel: createFilteredRowModel(),
+    },
+    get data() {
+      return data()
+    },
+    columns,
+    state: {
+      get columnFilters() {
+        return columnFilters()
+      },
+      get globalFilter() {
+        return globalFilter()
+      },
+    },
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: 'includesString',
+    onColumnFiltersChange: setColumnFilters,
+    debugTable: true,
+    debugHeaders: true,
+    debugColumns: false,
+  })
+
+  return (
+    <div class="p-2">
+      <input
+        class="p-2 font-lg shadow border border-block"
+        value={globalFilter()}
+        onInput={(e) => debounceSetGlobalFilter(e.currentTarget.value)}
+        placeholder="Search all columns..."
+      />
+      <div class="h-2" />
+      <table>
+        <thead>
+          <For each={table.getHeaderGroups()}>
+            {(headerGroup) => (
+              <tr>
+                <For each={headerGroup.headers}>
+                  {(header) => (
+                    <th colSpan={header.colSpan}>
+                      {header.isPlaceholder ? null : (
+                        <>
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                          {header.column.getCanFilter() ? (
+                            <div>
+                              <ColumnFilter
+                                column={header.column}
+                                table={table as any}
+                              />
+                            </div>
+                          ) : null}
+                        </>
+                      )}
+                    </th>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </thead>
+        <tbody>
+          <For each={table.getRowModel().rows.slice(0, 10)}>
+            {(row) => (
+              <tr>
+                <For each={row.getVisibleCells()}>
+                  {(cell) => (
+                    <td>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </tbody>
+      </table>
+      <div>{table.getRowModel().rows.length} Rows</div>
+      <div>
+        <button onClick={() => refreshData()}>Refresh Data</button>
+      </div>
+      <pre>{JSON.stringify(table.getState(), null, 2)}</pre>
+    </div>
+  )
+}
+
+export default App
diff --git a/examples/solid/filters-faceted/src/ColumnFilter.tsx b/examples/solid/filters-faceted/src/ColumnFilter.tsx
@@ -0,0 +1,97 @@
+import { debounce } from '@solid-primitives/scheduled'
+import { For, Show, createMemo } from 'solid-js'
+import type { Column, Table } from '@tanstack/solid-table'
+
+function ColumnFilter(props: {
+  column: Column<any, any>
+  table: Table<any, any>
+}) {
+  const firstValue = props.table
+    .getPreFilteredRowModel()
+    .flatRows[0]?.getValue(props.column.id)
+
+  const columnFilterValue = () => props.column.getFilterValue()
+
+  const sortedUniqueValues = createMemo(() =>
+    typeof firstValue === 'number'
+      ? []
+      : Array.from(props.column.getFacetedUniqueValues().keys()).sort(),
+  )
+
+  return (
+    <Show
+      when={typeof firstValue === 'number'}
+      fallback={
+        <div>
+          <datalist id={`${props.column.id}list`}>
+            <For each={sortedUniqueValues().slice(0, 5000)}>
+              {(value: string) => <option value={value} />}
+            </For>
+          </datalist>
+          <input
+            type="text"
+            value={(columnFilterValue() ?? '') as string}
+            onInput={debounce(
+              (e) => props.column.setFilterValue(e.target.value),
+              500,
+            )}
+            placeholder={`Search... (${props.column.getFacetedUniqueValues().size})`}
+            class="w-36 border shadow rounded"
+            list={`${props.column.id}list`}
+          />
+        </div>
+      }
+    >
+      <div>
+        <div class="flex space-x-2">
+          <input
+            type="number"
+            min={Number(props.column.getFacetedMinMaxValues()?.[0] ?? '')}
+            max={Number(props.column.getFacetedMinMaxValues()?.[1] ?? '')}
+            value={
+              (columnFilterValue() as [number, number] | undefined)?.[0] ?? ''
+            }
+            onInput={debounce(
+              (e) =>
+                props.column.setFilterValue((old: [number, number]) => [
+                  e.target.value,
+                  old[1],
+                ]),
+              500,
+            )}
+            placeholder={`Min ${
+              props.column.getFacetedMinMaxValues()?.[0]
+                ? `(${props.column.getFacetedMinMaxValues()?.[0]})`
+                : ''
+            }`}
+            class="w-24 border shadow rounded"
+          />
+          <input
+            type="number"
+            min={Number(props.column.getFacetedMinMaxValues()?.[0] ?? '')}
+            max={Number(props.column.getFacetedMinMaxValues()?.[1] ?? '')}
+            value={
+              (columnFilterValue() as [number, number] | undefined)?.[1] ?? ''
+            }
+            onInput={debounce(
+              (e) =>
+                props.column.setFilterValue((old: [number, number]) => [
+                  old[0],
+                  e.target.value,
+                ]),
+              500,
+            )}
+            placeholder={`Max ${
+              props.column.getFacetedMinMaxValues()?.[1]
+                ? `(${props.column.getFacetedMinMaxValues()?.[1]})`
+                : ''
+            }`}
+            class="w-24 border shadow rounded"
+          />
+        </div>
+      </div>
+    </Show>
+  )
+}
+
+export default ColumnFilter
diff --git a/examples/solid/filters-faceted/src/index.css b/examples/solid/filters-faceted/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/solid/filters-faceted/src/index.tsx b/examples/solid/filters-faceted/src/index.tsx
@@ -0,0 +1,6 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+import './index.css'
+import App from './App'
+
+render(() => <App />, document.getElementById('root') as HTMLElement)