@kopexa/data-grid 0.0.0-canary-20250921225330

package/dist/data-grid.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DataGridVariants } from '@kopexa/theme';
+import { RowData, Table, Row } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        headerTitle?: string;
+        headerClassName?: string;
+        cellClassName?: string;
+        skeleton?: ReactNode;
+        expandedContent?: (row: TData) => ReactNode;
+    }
+}
+type BaseProps<TData extends object> = {
+    table: Table<TData>;
+    emptyMessage?: string;
+    isLoading?: boolean;
+    pageSize?: number;
+};
+type DataGridProps<TData extends object> = BaseProps<TData> & DataGridVariants & {
+    children?: ReactNode;
+};
+declare function DataGrid<TData extends object>(props: DataGridProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataGridContainer({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+    border?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DataGridTable<TData>(): react_jsx_runtime.JSX.Element;
+declare function DataGridTableRowSelectAll({ size, }: {
+    size?: "sm" | "md" | "lg";
+}): react_jsx_runtime.JSX.Element;
+declare function DataGridTableRowSelect<TData>({ row, size, }: {
+    row: Row<TData>;
+    size?: "sm" | "md" | "lg";
+}): react_jsx_runtime.JSX.Element;
+
+export { DataGrid, DataGridContainer, type DataGridProps, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll };

package/dist/data-grid.js

@@ -0,0 +1,420 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/data-grid.tsx
+var data_grid_exports = {};
+__export(data_grid_exports, {
+  DataGrid: () => DataGrid,
+  DataGridContainer: () => DataGridContainer,
+  DataGridTable: () => DataGridTable,
+  DataGridTableRowSelect: () => DataGridTableRowSelect,
+  DataGridTableRowSelectAll: () => DataGridTableRowSelectAll
+});
+module.exports = __toCommonJS(data_grid_exports);
+var import_checkbox = require("@kopexa/checkbox");
+var import_react_utils = require("@kopexa/react-utils");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_react_table = require("@tanstack/react-table");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [DataGridProvider, useDataGridContext] = (
+  // biome-ignore lint/suspicious/noExplicitAny: no idea.
+  (0, import_react_utils.createContext)()
+);
+function DataGrid(props) {
+  const {
+    children,
+    table,
+    columnsResizable = import_theme.datagrid.defaultVariants.columnsResizable,
+    columnsDraggable,
+    columnsPinnable,
+    stripped,
+    border = import_theme.datagrid.defaultVariants.border,
+    rowBorder = import_theme.datagrid.defaultVariants.rowBorder,
+    dense = import_theme.datagrid.defaultVariants.dense,
+    rowRounded = import_theme.datagrid.defaultVariants.rowRounded,
+    headerBackground = import_theme.datagrid.defaultVariants.headerBackground,
+    width = import_theme.datagrid.defaultVariants.width,
+    loadingMode,
+    emptyMessage,
+    isLoading = false,
+    pageSize = 20,
+    cellBorder,
+    ...rest
+  } = props;
+  const styles = (0, import_theme.datagrid)({
+    border,
+    columnsResizable,
+    columnsDraggable,
+    columnsPinnable,
+    headerBackground,
+    stripped,
+    rowBorder,
+    loadingMode,
+    cellBorder,
+    rowRounded,
+    width,
+    dense
+  });
+  if (!table) {
+    throw new Error('DataGrid requires a "table" prop');
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DataGridProvider,
+    {
+      value: {
+        table,
+        styles,
+        columnsResizable,
+        columnsDraggable,
+        columnsPinnable,
+        stripped,
+        rowBorder,
+        loadingMode,
+        emptyMessage,
+        isLoading,
+        pageSize
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function DataGridContainer({
+  children,
+  className
+}) {
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "data-grid", className: (0, import_shared_utils.cn)(styles.container({ className })), children });
+}
+function DataGridTableHead({
+  children,
+  className,
+  ...restProps
+}) {
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { className: styles.head({ className }), ...restProps, children });
+}
+function DataGridTableHeadRow({
+  children,
+  headerGroup,
+  className,
+  ...restProps
+}) {
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "tr",
+    {
+      className: styles.headerRow({ className }),
+      ...restProps,
+      children
+    },
+    headerGroup.id
+  );
+}
+function DataGridTableBase({
+  children,
+  className,
+  ...restProps
+}) {
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "table",
+    {
+      "data-slot": "data-grid-table",
+      className: styles.table({ className }),
+      ...restProps,
+      children
+    }
+  );
+}
+function DataGridTableHeadRowCell({
+  children,
+  header,
+  dndRef
+}) {
+  var _a;
+  const { styles } = useDataGridContext();
+  const { column } = header;
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinned = isPinned === "right" && column.getIsFirstColumn("right");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "th",
+    {
+      ref: dndRef,
+      style: {
+        "--size": `${header.getSize()}px`
+      },
+      "data-pinned": isPinned || void 0,
+      "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
+      className: (0, import_shared_utils.cn)(
+        styles.headerRowCell(),
+        (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName
+      ),
+      children
+    },
+    header.id
+  );
+}
+function DataGridTableRowSpacer() {
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { "aria-hidden": "true", className: styles.rowSpacer() });
+}
+function DataGridTableHeadRowCellResize({
+  header
+}) {
+  const { column } = header;
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        onDoubleClick: () => column.resetSize(),
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler(),
+        className: styles.headRowCellResize()
+      }
+    }
+  );
+}
+function DataGridTableBody({
+  children,
+  className,
+  ...restProps
+}) {
+  const { styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { className: (0, import_shared_utils.cn)(styles.body({ className })), ...restProps, children });
+}
+function DataGridTableEmpty() {
+  const { styles, table, emptyMessage } = useDataGridContext();
+  const totalColumns = table.getAllColumns().length;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: totalColumns, className: styles.empty(), children: emptyMessage || "No data available." }) });
+}
+function DataGridTableBodyRowSkeleton({ children }) {
+  const { table, styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "tr",
+    {
+      className: (0, import_shared_utils.cn)(
+        styles.bodyRowSkeleton,
+        // props.onRowClick && 'cursor-pointer',
+        table.options.enableRowSelection && "[&_>:first-child]:relative"
+      ),
+      children
+    }
+  );
+}
+function DataGridTableBodyRowCell({
+  children,
+  cell,
+  dndRef,
+  dndStyle
+}) {
+  var _a;
+  const { styles, columnsResizable, columnsDraggable, columnsPinnable } = useDataGridContext();
+  const { column } = cell;
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinned = isPinned === "right" && column.getIsFirstColumn("right");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "td",
+    {
+      ref: dndRef,
+      ...columnsDraggable && !isPinned ? { cell } : {},
+      style: {
+        ...columnsPinnable && column.getCanPin() && getPinningStyles(column),
+        ...dndStyle ? dndStyle : null
+      },
+      "data-pinned": isPinned || void 0,
+      "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
+      className: (0, import_shared_utils.cn)(
+        styles.bodyRowCell(),
+        columnsResizable && column.getCanResize() && "truncate",
+        (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName,
+        columnsPinnable && column.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"'
+        // column.getIndex() === 0 || column.getIndex() === row.getVisibleCells().length - 1
+        //   ? props.tableClassNames?.edgeCell
+        //   : '',
+      ),
+      children
+    },
+    cell.id
+  );
+}
+function DataGridTableBodyRowSkeletonCell({
+  children,
+  column
+}) {
+  var _a;
+  const { styles, columnsResizable, columnsPinnable } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "td",
+    {
+      className: (0, import_shared_utils.cn)(
+        styles.bodyRowSkeletonCell(),
+        columnsResizable && column.getCanResize() && "truncate",
+        (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName,
+        columnsPinnable && column.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"'
+        // column.getIndex() === 0 || column.getIndex() === table.getVisibleFlatColumns().length - 1
+        //   ? props.tableClassNames?.edgeCell
+        //   : '',
+      ),
+      children
+    }
+  );
+}
+function DataGridTableBodyRow({
+  children,
+  row,
+  dndRef,
+  dndStyle
+}) {
+  const { styles, table } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "tr",
+    {
+      ref: dndRef,
+      style: { ...dndStyle ? dndStyle : null },
+      "data-state": table.options.enableRowSelection && row.getIsSelected() ? "selected" : void 0,
+      className: (0, import_shared_utils.cn)(
+        styles.bodyRow(),
+        //props.onRowClick && 'cursor-pointer',
+        table.options.enableRowSelection && "[&_>:first-child]:relative"
+      ),
+      children
+    }
+  );
+}
+function DataGridTableBodyRowExpanded({ row }) {
+  var _a, _b, _c;
+  const { table, styles } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: styles.bodyRowExpanded(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: row.getVisibleCells().length, children: (_c = (_b = (_a = table.getAllColumns().find((column) => {
+    var _a2;
+    return (_a2 = column.columnDef.meta) == null ? void 0 : _a2.expandedContent;
+  })) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.expandedContent) == null ? void 0 : _c.call(_b, row.original) }) });
+}
+function DataGridTable() {
+  const {
+    table,
+    columnsResizable,
+    stripped,
+    rowBorder,
+    loadingMode,
+    isLoading,
+    pageSize
+  } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBase, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRow, { headerGroup, children: headerGroup.headers.map((header) => {
+      const { column } = header;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableHeadRowCell, { header, children: [
+        header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+          header.column.columnDef.header,
+          header.getContext()
+        ),
+        columnsResizable && column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRowCellResize, { header })
+      ] }, column.id);
+    }) }, headerGroup.id)) }),
+    (stripped || !rowBorder) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableRowSpacer, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowSkeleton, { children: table.getVisibleFlatColumns().map((column, colIndex) => {
+      var _a;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DataGridTableBodyRowSkeletonCell,
+        {
+          column,
+          children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
+        },
+        colIndex.toString()
+      );
+    }) }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRow, { row, children: row.getVisibleCells().map((cell) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowCell, { cell, children: (0, import_react_table.flexRender)(
+            cell.column.columnDef.cell,
+            cell.getContext()
+          ) }, cell.id);
+        }) }, row.id),
+        row.getIsExpanded() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowExpanded, { row })
+      ] }, row.id);
+    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableEmpty, {}) })
+  ] });
+}
+function getPinningStyles(column) {
+  const isPinned = column.getIsPinned();
+  return {
+    left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+    position: isPinned ? "sticky" : "relative",
+    width: column.getSize(),
+    zIndex: isPinned ? 1 : 0
+  };
+}
+function DataGridTableRowSelectAll({
+  size
+}) {
+  const { table, isLoading } = useDataGridContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_checkbox.Checkbox,
+    {
+      checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
+      disabled: isLoading || table.getRowModel().rows.length === 0,
+      onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+      "aria-label": "Select all",
+      size,
+      className: "align-[inherit]"
+    }
+  );
+}
+function DataGridTableRowSelect({
+  row,
+  size
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_shared_utils.cn)(
+          "hidden absolute top-0 bottom-0 start-0 w-[2px] bg-primary",
+          row.getIsSelected() && "block"
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_checkbox.Checkbox,
+      {
+        checked: row.getIsSelected(),
+        onCheckedChange: (value) => row.toggleSelected(!!value),
+        "aria-label": "Select row",
+        size: size != null ? size : "sm",
+        className: "align-[inherit]"
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataGrid,
+  DataGridContainer,
+  DataGridTable,
+  DataGridTableRowSelect,
+  DataGridTableRowSelectAll
+});

package/dist/data-grid.mjs

@@ -0,0 +1,16 @@
+"use client";
+"use client";
+import {
+  DataGrid,
+  DataGridContainer,
+  DataGridTable,
+  DataGridTableRowSelect,
+  DataGridTableRowSelectAll
+} from "./chunk-XYG65G3U.mjs";
+export {
+  DataGrid,
+  DataGridContainer,
+  DataGridTable,
+  DataGridTableRowSelect,
+  DataGridTableRowSelectAll
+};

package/dist/index.d.mts

@@ -0,0 +1,15 @@
+import { DataGrid as DataGrid$1, DataGridContainer, DataGridTable, DataGridTableRowSelectAll, DataGridTableRowSelect } from './data-grid.mjs';
+export { DataGridProps } from './data-grid.mjs';
+import 'react/jsx-runtime';
+import '@kopexa/theme';
+import '@tanstack/react-table';
+import 'react';
+
+declare const DataGrid: typeof DataGrid$1 & {
+    Container: typeof DataGridContainer;
+    Table: typeof DataGridTable;
+    SelectAll: typeof DataGridTableRowSelectAll;
+    RowSelect: typeof DataGridTableRowSelect;
+};
+
+export { DataGrid };

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import { DataGrid as DataGrid$1, DataGridContainer, DataGridTable, DataGridTableRowSelectAll, DataGridTableRowSelect } from './data-grid.js';
+export { DataGridProps } from './data-grid.js';
+import 'react/jsx-runtime';
+import '@kopexa/theme';
+import '@tanstack/react-table';
+import 'react';
+
+declare const DataGrid: typeof DataGrid$1 & {
+    Container: typeof DataGridContainer;
+    Table: typeof DataGridTable;
+    SelectAll: typeof DataGridTableRowSelectAll;
+    RowSelect: typeof DataGridTableRowSelect;
+};
+
+export { DataGrid };