$ npm create vite # 然后选择react
$ npm i @tanstack/react-table
Copy

import { useState,ReactNode } from "react";
import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";

// ts中声明table中每行数据的形状 Person在框架中对应泛型TData
type Person = {
  firstName: string
  lastName: string
}

// 声明列的定义即表头的元数据信息，定义中需要声明两个泛型TData和TValue，TValue对应每个cell元素中的值，此处声明为ReactNode即可，可兼容string|jsx
const columns: ColumnDef<Person, ReactNode>[] = [
  {id: 'firstName', accessorKey: "firstName", header: "first name" , cell: info => <Card>{info.getValue()}</Card>},
  {id: 'lastName',  accessorKey: "lastName", header: "last name" ,cell: info => <Card>{info.getValue()}</Card>},
]

function Table(props: {data: Person[]}) {
  const [data] = useState(props.data);
  // useReactTable hook必须的元素， data即TData[]是表格的数据，columns是ColumnDef[]是表格表头元数据信息，getCoreRowMode必传参数
  // getCoreRowModel是一个必须的参数，并且必须传入getCoreRowModel()函数，有点多此一举是因为tanstack的模块化开发导致的这个模块是required
  // 其他模块还有过滤器/排序/分页等等。。
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  // table的重要属性：1 getHeaderGroups() 返回多组表头，最常见的单行表头则长度为1
  // header中重要的属性header.column.columnDef就是我们传入的列的定义
  // 2 getRowModel()使用定义好的模块处理后得到的行数据，如果只定义了 getCoreRowModel 那就是全量数据，如果有排序则会排序模块也生效，以此类推
  // RowModel<TData>中最重要的属性就是rows，是一个Row<TData>[]，每一行Row又有多个Cell<TData,TValue>，每个cell与header是同级别都是最小的单元td级别
  // cell可以获取到当前对应的列columnDef信息，固定的可以通过flexRender(cell.column.columnDef.cell, cell.getContext())完成使用coldef中定义的cell渲染方式，来渲染当前cell的value
  return <table>
    <thead>
      {
        table.getHeaderGroups().map(headerGroup=> <tr key={headerGroup.id}>
          {
            headerGroup.headers.map(header => <th key={header.id}>
              {flexRender(header.column.columnDef.header, header.getContext())}
            </th>)
          }
        </tr>)
      }
    </thead>
    <tbody>
      {
        table.getRowModel().rows.map(row => <tr key={row.id}>
          {row.getAllCells().map(cell => <td key={cell.id}>
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
          </td>)}
        </tr>)
      }
    </tbody>
  </table>
}

export default Table
Copy

const defaultData: Person[] = [
  {
    firstName: 'tanner',
    lastName: 'linsley',
    age: 24,
    visits: 100,
    status: 'In Relationship',
    progress: 50,
  },
  {
    firstName: 'tandy',
    lastName: 'miller',
    age: 40,
    visits: 40,
    status: 'Single',
    progress: 80,
  },
  {
    firstName: 'joe',
    lastName: 'dirte',
    age: 45,
    visits: 20,
    status: 'Complicated',
    progress: 10,
  },
]
<Table data={defaultData}/>
Copy

const columns: ColumnDef<Person, any>[] = [
  {
    id: "id",
    header: "header", // 与id二者至少指定一个 
    cell: "cell",     // 非必须
    footer: "footer", // 非必须
  }
]
Copy

const columns: ColumnDef<Person, any>[] = [
  {
    id: "名字",
    header: info => <h1>{info.column.id}</h1>, // 这个info是HeaderContext类型
    cell: info => <p style={{color: 'blue'}}>{info.row.original.firstName}</p>, // 这个info是CellContext类型
  }
]
Copy

const columns: ColumnDef<Person, any>[] = [
  {
    accessorKey: "firstName",
    header: info => <h1>{info.column.id}</h1>,
    cell: info => <p style={{color: 'blue'}}>{info.getValue()}</p>, 
  }
]
Copy

const columns: ColumnDef<Person, any>[] = [
  {
    id: "g1",
    header: ()=><h1>name</h1>,
    columns: [
      {
        accessorKey: "firstName",
        header: "firstName",
        cell: info => <p style={{color: 'blue'}}>{info.getValue()}</p>,
      },
      {
        accessorKey: "lastName",
        header: "lastName",
        cell: info => <p style={{color: 'blue'}}>{info.getValue()}</p>,
      },
    ]
  }
]
Copy

typeof(cell.column.columnDef.cell) === 'string' ? 
  cell.column.columnDef.cell :
  cell.column.columnDef.cell!(cell.getContext())
Copy

import { ColumnDef, flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
....
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });
...

<th key={header.id} colSpan={header.colSpan}>
  <span onClick={header.column.getToggleSortingHandler()}>
    {flexRender(header.column.columnDef.header,header.getContext())}
    {header.column.getIsSorted() && (header.column.getIsSorted() === 'asc' ? '🔼' :'🔽')}
  </span>
</th>
Copy

  {
    accessorKey: "lastName",
    header: "lastName",
    sortingFn: (rowA, rowB) => rowA.original.lastName.length - rowB.original.lastName.length,
    cell: info => <p style={{color: 'blue'}}>{info.getValue()}</p>,
  }
Copy

  const [mysort, setMysort] = useState([])
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: sorting => setMysort(sorting),
    state: {sorting: mysort}
  });

  // 此时setMysort可以通过回调，让其他组件触发排序状态改变
Copy

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    enableMultiSort: true,
    // maxMultiSortColCount: 3, 默认多列可以是所有列，这里可指定最多3列
    // isMultiSortEvent: function(e) { return e.shiftKey; }, 默认是shift按下，可以改成别的比如control或者不限制直接返回true
  });
Copy

import { ColumnDef, flexRender, getCoreRowModel, getFilteredRowModel, useReactTable } from "@tanstack/react-table";
....
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
  });
...

<th key={header.id} colSpan={header.colSpan}>
  <span>
    {flexRender(header.column.columnDef.header,header.getContext())}
    {header.column.getCanFilter() && 
      <input type="text" onChange={e=>{header.column.setFilterValue(()=>e.target.value)}}/>
    }
  </span>
</th>
Copy

  {
    accessorKey: "lastName",
    header: "lastName",
    cell: info => <p style={{color: 'blue'}}>{info.getValue()}</p>,
    filterFn: (row, colId, filterValue) => {
      return row.original.lastName.length < parseInt(filterValue)
    }
  }
Copy

....

  const [filterTxt, setFilterTxt] = useState('')
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    state:{
      globalFilter: filterTxt,
    },
    // 全局过滤的函数，不指定就是任意一个cell包含filterValue就显示
    globalFilterFn: (row, _, filterValue) => {
      return  Object.values(row.original).filter(v=>v.toString().includes(filterValue)).length > 0
    },
  });

...

<input value={filterTxt} onChange={e=>{setFilterTxt(e.target.value)}}/>

....
Copy

....
const table = useReactTable({
    data,
    columns,
    columnResizeMode: 'onChange',
    getCoreRowModel: getCoreRowModel(),
}
...
<table style={{width: table.getTotalSize()}}>
....
  <th key={header.id} colSpan={header.colSpan} style={{width: header.getSize()}}>
    <span>
      {flexRender(header.column.columnDef.header,header.getContext())}
    </span>
    <span style={{width:'1px', height: '1rem',borderRight: '3px solid', float: 'right'}}
      onMouseDown={header.getResizeHandler()}></span>
  </th>
Copy

  const table = useReactTable({
    data,
    columns,
    columnResizeMode: 'onChange',
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  })
....
//tanstack中pageIndex也就是页号是从0开始，这个比较重要，所以展示数据的时候需要+1比较readable一点。
<div>Page{table.getState().pagination.pageIndex+1} of {table.getPageCount()}</div>
<button disabled={!table.getCanPreviousPage()} onClick={()=>table.previousPage()}>&lt;</button>
<button disabled={!table.getCanNextPage()} onClick={()=>table.nextPage()}>&gt;</button>
Copy

// server-side就需要自己维系data和pageIndex信息
  const [data, setData] = React.useState(() => [...defaultData])
  const [pageIndex, setPageIndex] = React.useState(0)
  const table = useReactTable({
    data,
    columns,
    columnResizeMode: 'onChange',
    getCoreRowModel: getCoreRowModel(),
    pageCount: 10,
    manualPagination: true, 
    state:{
      pagination:{
        pageIndex,
        pageSize: 10
      }
    },
    autoResetPageIndex: false,
  })


  ...
  <div>Page{table.getState().pagination.pageIndex+1} of {table.getPageCount()}</div>
  <button disabled={!table.getCanPreviousPage()} onClick={()=>{setData(fetchFromServer()); setPageIndex(pageIndex - 1)}}>&lt;</button>
  <button disabled={!table.getCanNextPage()} onClick={()=>{setData(fetchFromServer()); setPageIndex(pageIndex + 1)}}>&gt;</button>
Copy