@rtdui/datatable/esm/DataTable/BodyCell.mjs

React DataTable component based on Rtdui components

'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import clsx from 'clsx';
import { flexRender } from '@tanstack/react-table';
import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
import { getType } from '@rtdui/core';
import { shouldElevation } from './utils/shouldElevation.mjs';

function BodyCell(props) {
  const { cell, scrollingTrigger, enableGrouping, changesRef } = props;
  const { row, column, table } = cell.getContext();
  const hasError = changesRef.current?.errors?.[row.id]?.[column.columnDef?.accessorKey];
  const cellDataType = getType(row.getValue(column.id));
  const isSticky = column.getIsPinned();
  return /* @__PURE__ */ jsx(
    "td",
    {
      className: clsx({
        elevation: shouldElevation(table, column, scrollingTrigger),
        "outline outline-1 outline-error outline-offset-[-2px]": hasError,
        "text-right": cellDataType === "Number",
        placeholder: cell.getIsPlaceholder()
      }),
      title: hasError || void 0,
      style: {
        // width: column.getSize(),
        position: isSticky ? "sticky" : "relative",
        left: column.getIsPinned() ? column.getStart("left") : void 0,
        zIndex: isSticky ? 1 : void 0
      },
      children: cell.getIsGrouped() ? (
        // 如果是分组单元格则添加展开按钮
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
          /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              onClick: row.getToggleExpandedHandler(),
              className: "btn btn-ghost btn-circle btn-xs",
              children: row.getIsExpanded() ? /* @__PURE__ */ jsx(IconChevronDown, { size: 16 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 16 })
            }
          ),
          flexRender(column.columnDef.cell, cell.getContext()),
          " (",
          row.subRows.length,
          ")"
        ] })
      ) : enableGrouping && cell.getIsAggregated() ? (
        // 如果是聚合的单元格
        flexRender(column.columnDef.aggregatedCell, cell.getContext())
      ) : cell.getIsPlaceholder() ? null : (
        // For cells with repeated values, render null, Otherwise just render the regular cell
        flexRender(column.columnDef.cell, cell.getContext())
      )
    },
    cell.id
  );
}

export { BodyCell };
//# sourceMappingURL=BodyCell.mjs.map