📄 tanstack/table/latest/docs/framework/react/examples/column-ordering
File: column-ordering.md | Updated: 11/15/2025
Source: https://tanstack.com/table/latest/docs/framework/react/examples/column-ordering
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
React
Version
Latest
Search...
+ K
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
Framework
React
Version
Latest
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples
React Example: Column Ordering
===================================================================================================================================================================================================================================================================================================================================================================================================================================
Code ExplorerCode
Interactive SandboxSandbox
-
src
-
index.css
-
main.tsx
-
makeData.ts
-
-
.gitignore
-
README.md
-
index.html
-
package.json
-
tsconfig.json
-
vite.config.js
tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { faker } from '@faker-js/faker'
import './index.css'
import {
ColumnDef,
ColumnOrderState,
flexRender,
getCoreRowModel,
useReactTable,
} from '@tanstack/react-table'
import { makeData, Person } from './makeData'
const defaultColumns: ColumnDef<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] = React.useState(() => makeData(20))
const [columns] = React.useState(() => [...defaultColumns])
const [columnVisibility, setColumnVisibility] = React.useState({})
const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>([])
const rerender = () => setData(() => makeData(20))
const table = useReactTable({
data,
columns,
state: {
columnVisibility,
columnOrder,
},
onColumnVisibilityChange: setColumnVisibility,
onColumnOrderChange: setColumnOrder,
getCoreRowModel: getCoreRowModel(),
debugTable: true,
debugHeaders: true,
debugColumns: true,
})
const randomizeColumns = () => {
table.setColumnOrder(
faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id))
)
}
return (
<div className="p-2">
<div className="inline-block border border-black shadow rounded">
<div className="px-1 border-b border-black">
<label>
<input
{...{
type: 'checkbox',
checked: table.getIsAllColumnsVisible(),
onChange: table.getToggleAllColumnsVisibilityHandler(),
}}
/>{' '}
Toggle All
</label>
</div>
{table.getAllLeafColumns().map(column => {
return (
<div key={column.id} className="px-1">
<label>
<input
{...{
type: 'checkbox',
checked: column.getIsVisible(),
onChange: column.getToggleVisibilityHandler(),
}}
/>{' '}
{column.id}
</label>
</div>
)
})}
</div>
<div className="h-4" />
<div className="flex flex-wrap gap-2">
<button onClick={() => rerender()} className="border p-1">
Regenerate
</button>
<button onClick={() => randomizeColumns()} className="border p-1">
Shuffle Columns
</button>
</div>
<div className="h-4" />
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map(row => (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
<tfoot>
{table.getFooterGroups().map(footerGroup => (
<tr key={footerGroup.id}>
{footerGroup.headers.map(header => (
<th key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.footer,
header.getContext()
)}
</th>
))}
</tr>
))}
</tfoot>
</table>
<pre>{JSON.stringify(table.getState().columnOrder, null, 2)}</pre>
</div>
)
}
const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
import React from 'react'
import ReactDOM from 'react-dom/client'
import { faker } from '@faker-js/faker'
import './index.css'
import {
ColumnDef,
ColumnOrderState,
flexRender,
getCoreRowModel,
useReactTable,
} from '@tanstack/react-table'
import { makeData, Person } from './makeData'
const defaultColumns: ColumnDef<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] = React.useState(() => makeData(20))
const [columns] = React.useState(() => [...defaultColumns])
const [columnVisibility, setColumnVisibility] = React.useState({})
const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>([])
const rerender = () => setData(() => makeData(20))
const table = useReactTable({
data,
columns,
state: {
columnVisibility,
columnOrder,
},
onColumnVisibilityChange: setColumnVisibility,
onColumnOrderChange: setColumnOrder,
getCoreRowModel: getCoreRowModel(),
debugTable: true,
debugHeaders: true,
debugColumns: true,
})
const randomizeColumns = () => {
table.setColumnOrder(
faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id))
)
}
return (
<div className="p-2">
<div className="inline-block border border-black shadow rounded">
<div className="px-1 border-b border-black">
<label>
<input
{...{
type: 'checkbox',
checked: table.getIsAllColumnsVisible(),
onChange: table.getToggleAllColumnsVisibilityHandler(),
}}
/>{' '}
Toggle All
</label>
</div>
{table.getAllLeafColumns().map(column => {
return (
<div key={column.id} className="px-1">
<label>
<input
{...{
type: 'checkbox',
checked: column.getIsVisible(),
onChange: column.getToggleVisibilityHandler(),
}}
/>{' '}
{column.id}
</label>
</div>
)
})}
</div>
<div className="h-4" />
<div className="flex flex-wrap gap-2">
<button onClick={() => rerender()} className="border p-1">
Regenerate
</button>
<button onClick={() => randomizeColumns()} className="border p-1">
Shuffle Columns
</button>
</div>
<div className="h-4" />
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map(row => (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
<tfoot>
{table.getFooterGroups().map(footerGroup => (
<tr key={footerGroup.id}>
{footerGroup.headers.map(header => (
<th key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.footer,
header.getContext()
)}
</th>
))}
</tr>
))}
</tfoot>
</table>
<pre>{JSON.stringify(table.getState().columnOrder, null, 2)}</pre>
</div>
)
}
const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Failed to find the root element')
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
