reactjs - tanstack table grouping by date how? - Stack Overflow

admin管理员组

文章数量:1126304

I want to group my table by date like this in the image

How can I archieve this ?

and code:

import "./styles.css";
import {
  ColumnDef,
  VisibilityState,
  flexRender,
  getCoreRowModel,
  getExpandedRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";

import { expandableColumns, expandableData } from "./column-data";

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
  expandedRowContent: any;
  getRowCanExpand: (row: any) => boolean;
}

export function ExpandableTable<TData, TValue>({
  columns,
  data,
  expandedRowContent,
  getRowCanExpand,
}: DataTableProps<TData, TValue>) {
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});

  const table = useReactTable({
    data,
    columns,
    getRowCanExpand,
    state: {
      columnVisibility,
    },
    autoResetPageIndex: false,
    enableRowSelection: true,
    onColumnVisibilityChange: setColumnVisibility,
    getCoreRowModel: getCoreRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
  });

  return (
    <div className="space-y-4">
      <div className="rounded-md border">
        <table>
          <thead>
            {table.getHeaderGroups().map((headerGroup) => (
              <tr key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <th key={header.id}>
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                    </th>
                  );
                })}
              </tr>
            ))}
          </thead>
          <tbody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <>
                  <tr
                    key={row.id}
                    data-state={row.getIsSelected() && "selected"}
                  >
                    {row.getVisibleCells().map((cell) => (
                      <td key={cell.id}>
                        {flexRender(
                          cell.column.columnDef.cell,
                          cell.getContext()
                        )}
                      </td>
                    ))}
                  </tr>

                  {row.getIsExpanded() && (
                    <tr>
                      {/* 2nd row is a custom 1 cell row */}
                      <td colSpan={row.getVisibleCells().length}>
                        {expandedRowContent[row.id].content}
                      </td>
                    </tr>
                  )}
                </>
              ))
            ) : (
              <tr>
                <td colSpan={columns.length} className="h-24 text-center">
                  No results.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default function App() {
  const [expandedRowState, setExpandedRowState] = useState<any>([]);

  const setExpandedRowStateById = (id: any, content: any, columnIndex: any) => {
    expandedRowState[id] = { content, columnIndex };
    setExpandedRowState([...expandedRowState]);
  };

  return (
    <div className="App">
      <h1>Expand Table Example</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ExpandableTable
        data={expandableData}
        columns={expandableColumns(expandedRowState, setExpandedRowStateById)}
        expandedRowContent={expandedRowState}
        getRowCanExpand={() => true}
      />
    </div>
  );
}

here is also a sandbox where it looks like right now

=%2Fsrc%2FApp.tsx%3A2%2C9

it is also good when I get expand the dates likes in the example of the image. If not thats not terrible.

本文标签： reactjstanstack table grouping by date howStack Overflow