+
Full-Width Column Resizing
+
+ The table fills its container. The last column stretches to fill any
+ remaining space. Try resizing individual columns — the last column
+ adjusts automatically. Resize the browser window to see the table adapt.
+
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
+
+ {header.isPlaceholder ? null : (
+
+ )}
+
header.column.resetSize()}
+ onMouseDown={header.getResizeHandler()}
+ onTouchStart={header.getResizeHandler()}
+ className={`resizer ${
+ header.column.getIsResizing() ? 'isResizing' : ''
+ }`}
+ />
+
+ ))}
+
+ ))}
+
+
+ {table.getRowModel().rows.map((row) => (
+
+ {row.getAllCells().map((cell) => (
+
+ {cell.renderValue()}
+
+ ))}
+
+ ))}
+
+
+
+
+
+ {JSON.stringify(
+ {
+ containerWidth,
+ totalColumnsWidth,
+ shouldExtendLastColumn,
+ columnSizing: table.state.columnSizing,
+ },
+ null,
+ 2,
+ )}
+
+
+ )
+}
+
+const rootElement = document.getElementById('root')
+if (!rootElement) throw new Error('Failed to find the root element')
+
+ReactDOM.createRoot(rootElement).render(
+
+
+ ,
+)
diff --git a/examples/react/column-resizing-full-width/src/makeData.ts b/examples/react/column-resizing-full-width/src/makeData.ts
new file mode 100644
index 0000000000..37144ed067
--- /dev/null
+++ b/examples/react/column-resizing-full-width/src/makeData.ts
@@ -0,0 +1,37 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+ firstName: string
+ lastName: string
+ age: number
+ visits: number
+ progress: number
+ status: 'relationship' | 'complicated' | 'single'
+}
+
+const range = (len: number) => {
+ const arr: Array
= []
+ for (let i = 0; i < len; i++) {
+ arr.push(i)
+ }
+ return arr
+}
+
+const newPerson = (): Person => {
+ return {
+ firstName: faker.person.firstName(),
+ lastName: faker.person.lastName(),
+ age: faker.number.int(40),
+ visits: faker.number.int(1000),
+ progress: faker.number.int(100),
+ status: faker.helpers.shuffle([
+ 'relationship',
+ 'complicated',
+ 'single',
+ ])[0],
+ }
+}
+
+export function makeData(len: number): Array {
+ return range(len).map(() => newPerson())
+}
diff --git a/examples/react/column-resizing-full-width/tsconfig.json b/examples/react/column-resizing-full-width/tsconfig.json
new file mode 100644
index 0000000000..6d545f543f
--- /dev/null
+++ b/examples/react/column-resizing-full-width/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/examples/react/column-resizing-full-width/vite.config.js b/examples/react/column-resizing-full-width/vite.config.js
new file mode 100644
index 0000000000..2e1361723a
--- /dev/null
+++ b/examples/react/column-resizing-full-width/vite.config.js
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+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'),
+ },
+ }),
+ react(),
+ ],
+})