Function App

examples/react/row-pinning/src/main.tsx:23–345

()

} from '@tanstack/react-table'

function App() {
  const rerender = React.useReducer(() => ({}), {})[1]

  //table states
  const [rowPinning, setRowPinning] = React.useState<RowPinningState>({
    top: [],
    bottom: [],
  })
  const [expanded, setExpanded] = React.useState<ExpandedState>({})

  //demo states
  const [keepPinnedRows, setKeepPinnedRows] = React.useState(true)
  const [includeLeafRows, setIncludeLeafRows] = React.useState(true)
  const [includeParentRows, setIncludeParentRows] = React.useState(false)
  const [copyPinnedRows, setCopyPinnedRows] = React.useState(false)

  const columns = React.useMemo<ColumnDef<Person>[]>(
    () => [
      {
        id: 'pin',
        header: () => 'Pin',
        cell: ({ row }) =>
          row.getIsPinned() ? (
            <button
              onClick={() => row.pin(false, includeLeafRows, includeParentRows)}
            >
              ❌
            </button>
          ) : (
            <div style={{ display: 'flex', gap: '4px' }}>
              <button
                onClick={() =>
                  row.pin('top', includeLeafRows, includeParentRows)
                }
              >
                ⬆️
              </button>
              <button
                onClick={() =>
                  row.pin('bottom', includeLeafRows, includeParentRows)
                }
              >
                ⬇️
              </button>
            </div>
          ),
      },
      {
        accessorKey: 'firstName',
        header: ({ table }) => (
          <>
            <button
              {...{
                onClick: table.getToggleAllRowsExpandedHandler(),
              }}
            >
              {table.getIsAllRowsExpanded() ? '👇' : '👉'}
            </button>{' '}