new simpler column size example

Author: KevinVandy

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

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import ReactDOM from 'react-dom/client'
 import { createTableHelper, flexRender } from '@tanstack/react-table'
-import type { ColumnDef } from '@tanstack/react-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 `useTable` hook and `createColumnHelper` method. You can choose to use either way.
@@ -58,13 +57,14 @@ const tableHelper = createTableHelper({
   _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 = [
+const columns = columnHelper.columns([
   // accessorKey method (most common for simple use-cases)
   columnHelper.accessor('firstName', {
     cell: (info) => info.getValue(),
@@ -96,7 +96,7 @@ const columns = [
     header: 'Profile Progress',
     footer: (info) => info.column.id,
   }),
-] as Array<ColumnDef<typeof tableHelper.features, Person, unknown>>
+])
 
 function App() {
   // 6. Store data with a stable reference

examples/react/column-dnd/src/main.tsx

@@ -1,13 +1,13 @@
-import React, { type CSSProperties } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom/client'
 import {
   ColumnOrdering,
+  ColumnSizing,
   createTableHelper,
   flexRender,
 } from '@tanstack/react-table'
 import {
   DndContext,
-  type DragEndEvent,
   KeyboardSensor,
   MouseSensor,
   TouchSensor,
@@ -24,12 +24,14 @@ import {
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { makeData } from './makeData'
+import type { DragEndEvent } from '@dnd-kit/core'
+import type { CSSProperties } from 'react'
 import type { Person } from './makeData'
 import type { Cell, ColumnDef, Header } from '@tanstack/react-table'
 import './index.css'
 
 const tableHelper = createTableHelper({
-  _features: { ColumnOrdering: ColumnOrdering },
+  _features: { ColumnOrdering, ColumnSizing },
   _rowModels: {},
   TData: {} as Person,
   debugTable: true,

examples/react/column-groups/src/main.tsx

@@ -7,7 +7,6 @@ import {
   tableFeatures,
   useTable,
 } from '@tanstack/react-table'
-import type { ColumnDef } from '@tanstack/react-table'
 
 type Person = {
   firstName: string
@@ -49,11 +48,11 @@ const _features = tableFeatures({})
 
 const columnHelper = createColumnHelper<typeof _features, Person>()
 
-const columns = [
+const columns = columnHelper.columns([
   columnHelper.group({
     id: 'hello',
     header: () => <span>Hello</span>,
-    columns: [
+    columns: columnHelper.columns([
       columnHelper.accessor('firstName', {
         cell: (info) => info.getValue(),
         footer: (props) => props.column.id,
@@ -64,19 +63,19 @@ const columns = [
         header: () => <span>Last Name</span>,
         footer: (props) => props.column.id,
       }),
-    ] as Array<ColumnDef<typeof _features, Person>>,
+    ]),
   }),
   columnHelper.group({
     header: 'Info',
     footer: (props) => props.column.id,
-    columns: [
+    columns: columnHelper.columns([
       columnHelper.accessor('age', {
         header: () => 'Age',
         footer: (props) => props.column.id,
       }),
       columnHelper.group({
         header: 'More Info',
-        columns: [
+        columns: columnHelper.columns([
           columnHelper.accessor('visits', {
             header: () => <span>Visits</span>,
             footer: (props) => props.column.id,
@@ -89,11 +88,11 @@ const columns = [
             header: 'Profile Progress',
             footer: (props) => props.column.id,
           }),
-        ] as Array<ColumnDef<typeof _features, Person>>,
+        ]),
       }),
-    ] as Array<ColumnDef<typeof _features, Person>>,
+    ]),
   }),
-]
+])
 
 function App() {
   const [data, _setData] = React.useState(() => [...defaultData])
@@ -128,7 +127,7 @@ function App() {
         <tbody>
           {table.getRowModel().rows.map((row) => (
             <tr key={row.id}>
-              {row.getVisibleCells().map((cell) => (
+              {row.getAllCells().map((cell) => (
                 <td key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </td>

examples/react/column-ordering/src/main.tsx

@@ -103,6 +103,8 @@ function App() {
     )
   }
 
+  console.log(table.getFlatHeaders())
+
   return (
     <div className="p-2">
       <div className="inline-block border border-black shadow rounded">

examples/react/column-resizing/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

examples/react/column-resizing/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`

examples/react/column-resizing/index.html

@@ -0,0 +1,13 @@
+<!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.tsx"></script>
+  </body>
+</html>

examples/react/column-resizing/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "tanstack-table-example-column-resizing",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite",
+    "lint": "eslint ./src"
+  },
+  "dependencies": {
+    "@tanstack/react-table": "^9.0.0-alpha.10",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^6.0.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "typescript": "5.6.3",
+    "vite": "^5.4.10"
+  }
+}

examples/react/column-resizing/src/index.css

@@ -0,0 +1,80 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+table,
+.divTable {
+  border: 1px solid lightgray;
+  width: fit-content;
+}
+
+.tr {
+  display: flex;
+}
+
+tr,
+.tr {
+  width: fit-content;
+  height: 30px;
+}
+
+th,
+.th,
+td,
+.td {
+  box-shadow: inset 0 0 0 1px lightgray;
+  padding: 0.25rem;
+}
+
+th,
+.th {
+  padding: 2px 4px;
+  position: relative;
+  font-weight: bold;
+  text-align: center;
+  height: 30px;
+}
+
+td,
+.td {
+  height: 30px;
+}
+
+.resizer {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 5px;
+  background: rgba(0, 0, 0, 0.5);
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+}
+
+.resizer.ltr {
+  right: 0;
+}
+
+.resizer.rtl {
+  left: 0;
+}
+
+.resizer.isResizing {
+  background: blue;
+  opacity: 1;
+}
+
+@media (hover: hover) {
+  .resizer {
+    opacity: 0;
+  }
+
+  *:hover > .resizer {
+    opacity: 1;
+  }
+}