start cleanup of svelte and lit examples

Author: KevinVandy

examples/angular/filters/src/app/app.component.ts

@@ -5,8 +5,6 @@ import {
   signal,
 } from '@angular/core'
 import {
-  type ColumnDef,
-  type ColumnFiltersState,
   FlexRenderDirective,
   createCoreRowModel,
   createFacetedMinMaxValues,
@@ -16,11 +14,18 @@ import {
   createPaginatedRowModel,
   createSortedRowModel,
   injectTable,
+  isFunction,
 } from '@tanstack/angular-table'
 import { FormsModule } from '@angular/forms'
 import { NgClass } from '@angular/common'
 import { FilterComponent } from './table-filter.component'
-import { type Person, makeData } from './makeData'
+import { makeData } from './makeData'
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  Updater,
+} from '@tanstack/angular-table'
+import type { Person } from './makeData'
 
 @Component({
   selector: 'app-root',
@@ -80,8 +85,8 @@ export class AppComponent {
     state: {
       columnFilters: this.columnFilters(),
     },
-    onColumnFiltersChange: (updater) => {
-      updater instanceof Function
+    onColumnFiltersChange: (updater: Updater<ColumnFiltersState>) => {
+      isFunction(updater)
         ? this.columnFilters.update(updater)
         : this.columnFilters.set(updater)
     },

examples/lit/basic/src/main.ts

@@ -2,16 +2,18 @@ import { customElement } from 'lit/decorators.js'
 import { LitElement, html } from 'lit'
 import { repeat } from 'lit/directives/repeat.js'
 import {
+  ColumnDef,
+  RowSorting,
   TableController,
-  createColumnHelper,
-  createCoreRowModel,
   flexRender,
+  tableFeatures,
 } from '@tanstack/lit-table'
 import install from '@twind/with-web-components'
 import config from '../twind.config'
 
 const withTwind = install(config)
 
+// 1. Define what the shape of your data will be for each row
 type Person = {
   firstName: string
   lastName: string
@@ -21,36 +23,44 @@ type Person = {
   progress: number
 }
 
-const columnHelper = createColumnHelper<any, Person>()
+// 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({
+  RowSorting: RowSorting,
+})
 
-const columns = [
-  columnHelper.accessor('firstName', {
+// const columnHelper = createColumnHelper<typeof _features, Person>()
+
+// 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(),
-    footer: (info) => info.column.id,
-  }),
-  columnHelper.accessor((row) => row.lastName, {
+  },
+  {
+    accessorFn: (row) => row.lastName, // accessorFn used (alternative) along with a custom id
     id: 'lastName',
-    cell: (info) => html`<i>${info.getValue()}</i>`,
     header: () => html`<span>Last Name</span>`,
-    footer: (info) => info.column.id,
-  }),
-  columnHelper.accessor('age', {
+    cell: (info) => html`<i>${info.getValue<string>()}</i>`,
+  },
+  {
+    accessorFn: (row) => Number(row.age), // accessorFn used to transform the data
+    id: 'age',
     header: () => 'Age',
     cell: (info) => info.renderValue(),
-    footer: (info) => info.column.id,
-  }),
-  columnHelper.accessor('visits', {
+  },
+  {
+    accessorKey: 'visits',
     header: () => html`<span>Visits</span>`,
-    footer: (info) => info.column.id,
-  }),
-  columnHelper.accessor('status', {
+  },
+  {
+    accessorKey: 'status',
     header: 'Status',
-    footer: (info) => info.column.id,
-  }),
-  columnHelper.accessor('progress', {
+  },
+  {
+    accessorKey: 'progress',
     header: 'Profile Progress',
-    footer: (info) => info.column.id,
-  }),
+  },
 ]
 
 const data: Array<Person> = [
@@ -91,15 +101,20 @@ const data: Array<Person> = [
 @customElement('lit-table-example')
 @withTwind
 class LitTableExample extends LitElement {
-  private tableController = new TableController<any, Person>(this)
+  private tableController = new TableController<typeof _features, Person>(this)
 
   protected render(): unknown {
     const table = this.tableController.table({
+      _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,
-      getCoreRowModel: createCoreRowModel(),
+      // add additional table options here
+      debugTable: true,
     })
 
+    console.log(table)
+
     return html`
       <table>
         <thead>
@@ -129,7 +144,7 @@ class LitTableExample extends LitElement {
             (row) => html`
               <tr>
                 ${repeat(
-                  row.getVisibleCells(),
+                  row.getAllCells(),
                   (cell) => cell.id,
                   (cell) =>
                     html` <td>

examples/react/basic-table-helper/src/main.tsx

@@ -55,7 +55,8 @@ const defaultData: Array<Person> = [
 // 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: {}, // `Core` row model is now included by default, but you can still override it here
+  _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,
 })
 

examples/svelte/column-groups/src/App.svelte

@@ -4,7 +4,6 @@
     FlexRender,
     createTable,
     tableFeatures,
-    tableOptions,
   } from '@tanstack/svelte-table'
   import './index.css'
 
@@ -98,14 +97,12 @@
     },
   ]
 
-  const options = tableOptions({
+  const table = createTable({
     _features,
     _rowModels: {},
     data: defaultData,
     columns: defaultColumns,
   })
-
-  const table = createTable(options)
 </script>
 
 <div class="p-2">

examples/svelte/column-ordering/src/App.svelte

@@ -4,18 +4,17 @@
     ColumnDef,
     ColumnOrderState,
     ColumnVisibilityState,
-    TableOptions,
   } from '@tanstack/svelte-table'
   import {
     ColumnOrdering,
     ColumnVisibility,
     FlexRender,
     createTable,
+    createTableState,
     tableFeatures,
   } from '@tanstack/svelte-table'
   import './index.css'
   import { makeData, type Person } from './makeData'
-  import { createTableState } from './state.svelte'
 
   const _features = tableFeatures({
     ColumnOrdering,
@@ -80,7 +79,13 @@
   const [columnVisibility, setColumnVisibility] =
     createTableState<ColumnVisibilityState>({})
 
-  const options: TableOptions<typeof _features, Person> = {
+  const randomizeColumns = () => {
+    table.setColumnOrder((_updater) =>
+      faker.helpers.shuffle(table.getAllLeafColumns().map((d) => d.id)),
+    )
+  }
+
+  const table = createTable({
     _features,
     _rowModels: {},
     get data() {
@@ -98,15 +103,7 @@
     onColumnOrderChange: setColumnOrder,
     onColumnVisibilityChange: setColumnVisibility,
     debugTable: true,
-  }
-
-  const randomizeColumns = () => {
-    table.setColumnOrder((_updater) =>
-      faker.helpers.shuffle(table.getAllLeafColumns().map((d) => d.id)),
-    )
-  }
-
-  const table = createTable(options)
+  })
 </script>
 
 <div class="p-2">

examples/svelte/column-pinning/src/App.svelte

@@ -6,25 +6,26 @@
     ColumnPinningState,
     ColumnVisibilityState,
     Header,
-    TableOptions,
   } from '@tanstack/svelte-table'
   import {
     ColumnPinning,
     ColumnVisibility,
     FlexRender,
+    ColumnOrdering,
     RowSorting,
     createSortedRowModel,
     createTable,
+    createTableState,
     tableFeatures,
   } from '@tanstack/svelte-table'
   import './index.css'
   import { makeData, type Person } from './makeData'
-  import { createTableState } from './state.svelte'
 
   const _features = tableFeatures({
-    RowSorting,
-    ColumnVisibility,
+    ColumnOrdering,
     ColumnPinning,
+    ColumnVisibility,
+    RowSorting,
   })
 
   const columns: ColumnDef<typeof _features, Person>[] = [
@@ -88,7 +89,13 @@
   const [columnVisibility, setColumnVisibility] =
     createTableState<ColumnVisibilityState>({})
 
-  const options: TableOptions<any, Person> = {
+  const randomizeColumns = () => {
+    table.setColumnOrder((_updater) =>
+      faker.helpers.shuffle(table.getAllLeafColumns().map((d) => d.id)),
+    )
+  }
+
+  const table = createTable({
     _features,
     _rowModels: { sortedRowModel: createSortedRowModel() },
     get data() {
@@ -110,18 +117,10 @@
     onColumnPinningChange: setColumnPinning,
     onColumnVisibilityChange: setColumnVisibility,
     debugTable: true,
-  }
-
-  const randomizeColumns = () => {
-    table.setColumnOrder((_updater) =>
-      faker.helpers.shuffle(table.getAllLeafColumns().map((d) => d.id)),
-    )
-  }
-
-  const table = createTable(options)
+  })
 </script>
 
-{#snippet headerCell(header: Header<any, Person, unknown>)}
+{#snippet headerCell(header: Header<typeof _features, Person, unknown>)}
   <th colSpan={header.colSpan}>
     <div class="whitespace-nowrap">
       {#if !header.isPlaceholder}

examples/svelte/column-pinning/src/main.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import { mount } from 'svelte'
 import App from './App.svelte'
 

examples/svelte/column-pinning/src/state.svelte.ts

@@ -2,13 +2,13 @@
   import type {
     ColumnDef,
     ColumnVisibilityState,
-    TableOptions,
     Updater,
   } from '@tanstack/svelte-table'
   import {
     ColumnVisibility,
     FlexRender,
     createTable,
+    isFunction,
     tableFeatures,
   } from '@tanstack/svelte-table'
   import './index.css'
@@ -106,12 +106,12 @@
   let columnVisibility = $state<ColumnVisibilityState>({})
 
   function setColumnVisibility(updater: Updater<ColumnVisibilityState>) {
-    if (updater instanceof Function) {
+    if (isFunction(updater)) {
       columnVisibility = updater(columnVisibility)
     } else columnVisibility = updater
   }
 
-  const options: TableOptions<typeof _features, Person> = {
+  const table = createTable({
     _features,
     _rowModels: {},
     data: defaultData,
@@ -123,9 +123,7 @@
     },
     onColumnVisibilityChange: setColumnVisibility,
     debugTable: true,
-  }
-
-  const table = createTable(options)
+  })
 </script>
 
 <div class="p-2">