使用 react-table 每周显示标题

Question

我正在尝试使用 react-table 实现一个表格来显示员工的班次。 我想找到一种方法来为表格中的每一列显示一周中的每一天（周一到周日），并具有一个可以浏览下/过去几周的功能。 我正在尝试各种方法，但我正在努力为此找到合适的解决方案。

这是我的桌子：

 <table
        {...getTableProps()}
        className="min-w-full divide-y divide-gray-200"
      >
        <thead className="bg-gray-50">
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th
                  {...column.getHeaderProps()}
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  {column.render("Header")}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {page.map((row) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()} className="bg-white rt-tr-group">
                {row.cells.map((cell) => {
                  return (
                    <td
                      {...cell.getCellProps}
                      className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
                    >
                      {cell.render("Cell")}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>

这些是我的专栏：

import moment from "moment";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClock } from "@fortawesome/free-solid-svg-icons";

const today = new Date();
const tomorrow = new Date(today);

const renderStateOfShift = (shift: any) => {
  if (shift.arrived) {
    return (
      <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
        In
      </span>
    );
  } else {
    return (
      <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
        Late
      </span>
    );
  }
};

const returnShifts = (
  data: { cell: { row: { original: { shifts: any[] } } } },
  formattedDay: string
) => {
  return (
    <div className="flex flex-col justify-center">
      {data.cell.row.original.shifts.map((shift: any) =>
        formattedDay === shift.start.split("T")[0] ? (
          <div>
            <div className="bg-white px-4 py-4 flex-1 my-2 rounded-lg shadow flex flex-col justify-center">
              <td>{shift.job_id}</td>
              <div className="flex flex-row">
                <td>
                  <FontAwesomeIcon icon={faClock} size="sm" />
                </td>

                <td>{shift.start.split("T")[1].substring(0, 5)}</td>
                <td>-</td>
                <td>{shift.end.split("T")[1].substring(0, 5)}</td>
                <td>{renderStateOfShift(shift)}</td>
              </div>
            </div>
          </div>
        ) : null
      )}
    </div>
  );
};

export const COLUMNS = [
  {
    Header: "EMPLOYEE",
    accessor: "worker_id",
    Cell: (data) => {
      const employeeName = data.cell.row.original.worker_name;
      const employeeRole = data.cell.row.original.worker_role;
      return (
        <div className="flex flex-row">
          <img
            className="inline-block  h-10 w-10 rounded-full"
            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixqx=azIRqR0jgc&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
            alt=""
          />

          <div className="flex flex-col justify-center">
            <td>{employeeName}</td>
            <td>{employeeRole}</td>
          </div>
        </div>
      );
    },
  },
  {
    Header: moment(today).format("ll"),
    accessor: "monday",
    //@ts-ignore
    Cell: (data) => {
      const formattedDay = today.toISOString().split("T")[0];
      return returnShifts(data, formattedDay);
    },
  },
  {
    Header: moment(tomorrow.setDate(tomorrow.getDate() + 1)).format("ll"),
    accessor: "tuesday",
    Cell: (data: any) => {
      const formattedDay = moment(today)
        .add(1, "day")
        .toISOString()
        .split("T")[0];
      return returnShifts(data, formattedDay);
    },
  },
  {
    Header: moment(tomorrow.setDate(tomorrow.getDate() + 1)).format("ll"),
    accessor: "thursday",
    Cell: (data: any) => {
      const formattedDay = moment(today)
        .add(2, "day")
        .toISOString()
        .split("T")[0];
      return returnShifts(data, formattedDay);
    },
  },
  {
    Header: moment(tomorrow.setDate(tomorrow.getDate() + 1)).format("ll"),
    accessor: "wednesday",
    Cell: (data: any) => {
      const formattedDay = moment(today)
        .add(3, "day")
        .toISOString()
        .split("T")[0];
      return returnShifts(data, formattedDay);
    },
  },
  {
    Header: moment(tomorrow.setDate(tomorrow.getDate() + 1)).format("ll"),
    accessor: "friday",
    Cell: (data: any) => {
      const formattedDay = moment(today)
        .add(4, "day")
        .toISOString()
        .split("T")[0];
      return returnShifts(data, formattedDay);
    },
  },
  {
    Header: moment(tomorrow.setDate(tomorrow.getDate() + 1)).format("ll"),
    accessor: "saturday",
    Cell: (data: any) => {
      const formattedDay = moment(today)
        .add(5, "day")
        .toISOString()
        .split("T")[0];
      return returnShifts(data, formattedDay);
    },
  },
  {
    Header: moment(tomorrow.setDate(tomorrow.getDate() + 1)).format("ll"),
    accessor: "sunday",
    Cell: (data: any) => {
      const formattedDay = moment(today)
        .add(6, "day")
        .toISOString()
        .split("T")[0];
      return returnShifts(data, formattedDay);
    },
  },
  {
    Header: "DETAILS",
    accessor: "delivery",
  },
];

到目前为止，表格是这样的：

有人可以帮帮我吗？

Answer 1

React-Table 公开 pageIndex 作为其 usePagination hook 的一部分，并且 moment.js 支持 adding days。如果您向其传递 JSX 回调，则属于 columns 的 Header 对象会公开表的状态。您可能不是让您的标题基于today，而是基于today + [pageIndex * (7 + offset)];例如，当前日期的标题可能如下所示：

    Header: ({ state }) => moment(today).add(7 * state.pageIndex, "days").format("ll"),