جدول Tanstack – یادگیری سریع

const BasicTable = () => {
    ......
    ...

    const table = useReactTable({ data, columns })

    return (
        <div></div>
    )
}

const columns = [
    {
      header: "ID",
      accessorKey: "id",
      footer: "ID",
    },
    {
      header: "First Name",
      accessorKey: "first_name",
      footer: "First Name",
    },
    {
      header: "Last Name",
      accessorKey: "last_name",
      footer: "Last Name",
    },
    ......
    ...
]

<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>
    ...
  </tbody>
  <tfoot></tfoot>
</table>

1. **A string** (e.g., `"Name"` → just displayed as-is).

2. **A function** (e.g., `({ column }) => {`[`column.id`](http://column.id)`} Column` → needs context to work).

<table>
   <thead>
       ...
   </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>
   </tfoot>
</table>

// import { getCoreRowModel } from "@tanstack/react-table"

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
});

<tfoot>
  {table.getFooterGroups().map((footerGroup) => (
    <tr key={footerGroup.id}>
      {footerGroup.headers.map((header) => (
        <th key={header.id}>
          {flexRender(header.column.columnDef.footer, header.getContext())}
        </th>
      ))}
    </tr>
  ))}
</tfoot>

const columns = [
    ......
    ...
    {
      header: "Date of Birth",
      accessorKey: "dob",
      footer: "Date of Birth",
      cell: (info) =>
        DateTime.fromISO(info.getValue()).toLocaleString(DateTime.DATE_MED),
    },
  ]

const columns = [
  {
    header: "ID",
    accessorKey: "id",
    footer: "ID",
  },
  {
    header: "Name",
    accessorFn: (row) => `${row.first_name} ${row.last_name}`, // accessor function
    footer: "Name",
  },
  // {
  //   header: "First Name",
  //   accessorKey: "first_name",
  //   footer: "First Name",
  // },
  // {
  //   header: "Last Name",
  //   accessorKey: "last_name",
  //   footer: "Last Name",
  // },
]

const columns = [
  {
    header: "ID",
    accessorKey: "id",
    footer: "ID",
  },
  {
    header: "Name",
    columns: [
      {
        header: "First",
        accessorKey: "first_name",
        footer: "First Name",
      },
      {
        header: "Last",
        accessorKey: "last_name",
        footer: "Last Name",
      },
    ],
  },
  ......
  ...
];

<thead>
  {table.getHeaderGroups().map((headerGroup) => (
    <tr key={headerGroup.id}>
      {headerGroup.headers.map((header) => (
        <th key={header.id}>
          {header.isPlaceholder
            ? null
            : flexRender(header.column.columnDef.header, header.getContext())}
        </th>
      ))}
    </tr>
  ))}
</thead>;

/*
Parent HeaderGroup > -- Name
Child_ HeaderGroup > ID First Last
*/

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
});

   onClick={() => table.setPageIndex(0)}>First page
   onClick={() => table.previousPage()}>Previous page
   onClick={() => table.nextPage()}>Next page
   onClick={() => table.setPageIndex(table.getPageCount() - 1)}>
    Last page
  

   onClick={() => table.setPageIndex(0)}>First page
  
    disabled={!table.getCanPreviousPage()}
    onClick={() => table.previousPage()}
  >
    Previous page
  
   disabled={!table.getCanNextPage()} onClick={() => table.nextPage()}>
    Next page
  
   onClick={() => table.setPageIndex(table.getPageCount() - 1)}>
    Last page
  

const [sorting, setSorting] = useState([]);

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
  state: {
    sorting: sorting,
  },
  onSortingChange: setSorting,
});

return (
  <div>
    <table>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th
                key={header.id}
                onClick={header.column.getToggleSortingHandler()}
              >
                {header.isPlaceholder ? null : (
                  <div>
                    {flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
                    {
                      { asc: "↑", desc: "↓" }[
                        header.column.getIsSorted() ?? null
                      ]
                    }
                  </div>
                )}
              </th>
            ))}
          </tr>
        ))}
      </thead>
    </table>
  </div>
);

const table = useReactTable({
  ......
  ...,
  getFilteredRowModel: getFilteredRowModel(),
});

const [filtering, setFiltering] = useState('')

const table = useReactTable({
  ......
  ...,
  state: {
      ...,
      globalFilter: filtering
  },
  onGlobalFiltering: setFiltering
});

<>
  <input
    type="text"
    value={filtering}
    onChange={(e) => setFiltering(e.target.value)}
  />
  <table></table>
</>