Function App

examples/react/sorting/src/main.tsx:25–183

()

}

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

  const [sorting, setSorting] = React.useState<SortingState>([])

  const columns = React.useMemo<ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'firstName',
        cell: info => info.getValue(),
        //this column will sort in ascending order by default since it is a string column
      },
      {
        accessorFn: row => row.lastName,
        id: 'lastName',
        cell: info => info.getValue(),
        header: () => <span>Last Name</span>,
        sortUndefined: 'last', //force undefined values to the end
        sortDescFirst: false, //first sort order will be ascending (nullable values can mess up auto detection of sort order)
      },
      {
        accessorKey: 'age',
        header: () => 'Age',
        //this column will sort in descending order by default since it is a number column
      },
      {
        accessorKey: 'visits',
        header: () => <span>Visits</span>,
        sortUndefined: 'last', //force undefined values to the end
      },
      {
        accessorKey: 'status',
        header: 'Status',
        sortingFn: sortStatusFn, //use our custom sorting function for this enum column
      },
      {
        accessorKey: 'progress',
        header: 'Profile Progress',
        // enableSorting: false, //disable sorting for this column
      },
      {
        accessorKey: 'rank',
        header: 'Rank',
        invertSorting: true, //invert the sorting order (golf score-like where smaller is better)
      },
      {
        accessorKey: 'createdAt',
        header: 'Created At',
        // sortingFn: 'datetime' //make sure table knows this is a datetime column (usually can detect if no null values)
      },
    ],
    []
  )

  const [data, setData] = React.useState(() => makeData(1_000))
  const refreshData = () => setData(() => makeData(100_000)) //stress test with 100k rows

  const table = useReactTable({