import React, { CSSProperties } from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import {
Cell,
ColumnDef,
Header,
flexRender,
getCoreRowModel,
useReactTable,
} from '@tanstack/react-table'
import { makeData, Person } from './makeData'
// needed for table body level scope DnD setup
import {
DndContext,
KeyboardSensor,
MouseSensor,
TouchSensor,
closestCenter,
type DragEndEvent,
useSensor,
useSensors,
} from '@dnd-kit/core'
import { restrictToHorizontalAxis } from '@dnd-kit/modifiers'
import {
arrayMove,
SortableContext,
horizontalListSortingStrategy,
} from '@dnd-kit/sortable'
// needed for row & cell level scope DnD setup
import { useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
const DraggableTableHeader = ({
header,
}: {
header: Header<Person, unknown>
}) => {
const { attributes, isDragging, listeners, setNodeRef, transform } =
useSortable({
id: header.column.id,
})
const style: CSSProperties = {
opacity: isDragging ? 0.8 : 1,
position: 'relative',
transform: CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
transition: 'width transform 0.2s ease-in-out',
whiteSpace: 'nowrap',
width: header.column.getSize(),
zIndex: isDragging ? 1 : 0,
}
return (
<th colSpan={header.colSpan} ref={setNodeRef} style={style}>
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
<button {...attributes} {...listeners}>
🟰
</button>
</th>
)
}
const DragAlongCell = ({ cell }: { cell: Cell<Person, unknown> }) => {
const { isDragging, setNodeRef, transform } = useSortable({
id: cell.column.id,
})
const style: CSSProperties = {
opacity: isDragging ? 0.8 : 1,
position: 'relative',
transform: CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
transition: 'width transform 0.2s ease-in-out',
width: cell.column.getSize(),
zIndex: isDragging ? 1 : 0,
}
return (
<td style={style} ref={setNodeRef}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
)
}
function App() {
const columns = React.useMemo<ColumnDef<Person>[]>(
() => [
{
accessorKey: 'firstName',
cell: info => info.getValue(),
id: 'firstName',
size: 150,
},
{
accessorFn: row => row.lastName,
cell: info => info.getValue(),
header: () => <span>Last Name</span>,
id: 'lastName',
size: 150,
},
{
accessorKey: 'age',
header: () => 'Age',
id: 'age',
size: 120,
},
{
accessorKey: 'visits',
header: () => <span>Visits</span>,
id: 'visits',
size: 120,
},
{
accessorKey: 'status',
header: 'Status',
id: 'status',
size: 150,
},
{
accessorKey: 'progress',
header: 'Profile Progress',
id: 'progress',
size: 180,
},
],
[]
)
const [data, setData] = React.useState(() => makeData(20))
const [columnOrder, setColumnOrder] = React.useState<string[]>(() =>
columns.map(c => c.id!)
)
const rerender = () => setData(() => makeData(20))
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
state: {
columnOrder,
},
onColumnOrderChange: setColumnOrder,
debugTable: true,
debugHeaders: true,
debugColumns: true,
})
// reorder columns after drag & drop
function handleDragEnd(event: DragEndEvent) {
const { active, over } = event
if (active && over && active.id !== over.id) {
setColumnOrder(columnOrder => {
const oldIndex = columnOrder.indexOf(active.id as string)
const newIndex = columnOrder.indexOf(over.id as string)
return arrayMove(columnOrder, oldIndex, newIndex) //this is just a splice util
})
}
}
const sensors = useSensors(
useSensor(MouseSensor, {}),
useSensor(TouchSensor, {}),
useSensor(KeyboardSensor, {})
)
return (
// NOTE: This provider creates div elements, so don't nest inside of <table> elements
<DndContext
collisionDetection={closestCenter}
modifiers={[restrictToHorizontalAxis]}
onDragEnd={handleDragEnd}
sensors={sensors}
>
<div className="p-2">
<div className="h-4" />
<div className="flex flex-wrap gap-2">
<button onClick={() => rerender()} className="border p-1">
Regenerate
</button>
</div>
<div className="h-4" />
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
<SortableContext
items={columnOrder}
strategy={horizontalListSortingStrategy}
>
{headerGroup.headers.map(header => (
<DraggableTableHeader key={header.id} header={header} />
))}
</SortableContext>
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map(row => (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
<SortableContext
key={cell.id}
items={columnOrder}
strategy={horizontalListSortingStrategy}
>
<DragAlongCell key={cell.id} cell={cell} />
</SortableContext>
))}
</tr>
))}
</tbody>
</table>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
</DndContext>
)
}
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, { CSSProperties } from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import {
Cell,
ColumnDef,
Header,
flexRender,
getCoreRowModel,
useReactTable,
} from '@tanstack/react-table'
import { makeData, Person } from './makeData'
// needed for table body level scope DnD setup
import {
DndContext,
KeyboardSensor,
MouseSensor,
TouchSensor,
closestCenter,
type DragEndEvent,
useSensor,
useSensors,
} from '@dnd-kit/core'
import { restrictToHorizontalAxis } from '@dnd-kit/modifiers'
import {
arrayMove,
SortableContext,
horizontalListSortingStrategy,
} from '@dnd-kit/sortable'
// needed for row & cell level scope DnD setup
import { useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
const DraggableTableHeader = ({
header,
}: {
header: Header<Person, unknown>
}) => {
const { attributes, isDragging, listeners, setNodeRef, transform } =
useSortable({
id: header.column.id,
})
const style: CSSProperties = {
opacity: isDragging ? 0.8 : 1,
position: 'relative',
transform: CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
transition: 'width transform 0.2s ease-in-out',
whiteSpace: 'nowrap',
width: header.column.getSize(),
zIndex: isDragging ? 1 : 0,
}
return (
<th colSpan={header.colSpan} ref={setNodeRef} style={style}>
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
<button {...attributes} {...listeners}>
🟰
</button>
</th>
)
}
const DragAlongCell = ({ cell }: { cell: Cell<Person, unknown> }) => {
const { isDragging, setNodeRef, transform } = useSortable({
id: cell.column.id,
})
const style: CSSProperties = {
opacity: isDragging ? 0.8 : 1,
position: 'relative',
transform: CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
transition: 'width transform 0.2s ease-in-out',
width: cell.column.getSize(),
zIndex: isDragging ? 1 : 0,
}
return (
<td style={style} ref={setNodeRef}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
)
}
function App() {
const columns = React.useMemo<ColumnDef<Person>[]>(
() => [
{
accessorKey: 'firstName',
cell: info => info.getValue(),
id: 'firstName',
size: 150,
},
{
accessorFn: row => row.lastName,
cell: info => info.getValue(),
header: () => <span>Last Name</span>,
id: 'lastName',
size: 150,
},
{
accessorKey: 'age',
header: () => 'Age',
id: 'age',
size: 120,
},
{
accessorKey: 'visits',
header: () => <span>Visits</span>,
id: 'visits',
size: 120,
},
{
accessorKey: 'status',
header: 'Status',
id: 'status',
size: 150,
},
{
accessorKey: 'progress',
header: 'Profile Progress',
id: 'progress',
size: 180,
},
],
[]
)
const [data, setData] = React.useState(() => makeData(20))
const [columnOrder, setColumnOrder] = React.useState<string[]>(() =>
columns.map(c => c.id!)
)
const rerender = () => setData(() => makeData(20))
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
state: {
columnOrder,
},
onColumnOrderChange: setColumnOrder,
debugTable: true,
debugHeaders: true,
debugColumns: true,
})
// reorder columns after drag & drop
function handleDragEnd(event: DragEndEvent) {
const { active, over } = event
if (active && over && active.id !== over.id) {
setColumnOrder(columnOrder => {
const oldIndex = columnOrder.indexOf(active.id as string)
const newIndex = columnOrder.indexOf(over.id as string)
return arrayMove(columnOrder, oldIndex, newIndex) //this is just a splice util
})
}
}
const sensors = useSensors(
useSensor(MouseSensor, {}),
useSensor(TouchSensor, {}),
useSensor(KeyboardSensor, {})
)
return (
// NOTE: This provider creates div elements, so don't nest inside of <table> elements
<DndContext
collisionDetection={closestCenter}
modifiers={[restrictToHorizontalAxis]}
onDragEnd={handleDragEnd}
sensors={sensors}
>
<div className="p-2">
<div className="h-4" />
<div className="flex flex-wrap gap-2">
<button onClick={() => rerender()} className="border p-1">
Regenerate
</button>
</div>
<div className="h-4" />
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
<SortableContext
items={columnOrder}
strategy={horizontalListSortingStrategy}
>
{headerGroup.headers.map(header => (
<DraggableTableHeader key={header.id} header={header} />
))}
</SortableContext>
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map(row => (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
<SortableContext
key={cell.id}
items={columnOrder}
strategy={horizontalListSortingStrategy}
>
<DragAlongCell key={cell.id} cell={cell} />
</SortableContext>
))}
</tr>
))}
</tbody>
</table>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
</DndContext>
)
}
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>
)
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.