@join-x5/react-data-grid 1.3.1-alpha-0 → 1.4.0

package/dist/index.es.js

@@ -1,72 +1,73 @@
-import { DataGrid as a } from "./DataGrid.es.js";
+import { DataGrid as l } from "./DataGrid.es.js";
 import { ControlPanel as r, ControlPanelContent as o, DataGridTable as d, Table as C, TableFooter as p, TableWrapper as D } from "./Table/index.es.js";
-import { TableBody as i, getDataGridTableBody as n } from "./TableBody/index.es.js";
-import { DataGridTableCell as b, TableCell as G, TableCellContent as m, getDataGridTableCell as f } from "./TableCell/index.es.js";
-import { TableDropdownHeader as w, TableDropdownItem as H } from "./TableDropdown/index.es.js";
-import { TableHead as u, getDataGridTableHead as c } from "./TableHead/index.es.js";
-import { DataGridTableHeadCell as B, TableHeadCell as R, TableHeadCellResizer as A, getDataGridTableHeadCell as k } from "./TableHeadCell/index.es.js";
-import { TableHeadRow as E } from "./TableHeadRow/index.es.js";
-import { ButtonCell as P, DataGridButtonCell as S } from "./TableInputCell/button.es.js";
-import { CheckboxCell as z, DataGridCheckboxCell as F } from "./TableInputCell/checkbox.es.js";
-import { DataGridDateCell as W, DateCell as j, getDataGridDateCell as q } from "./TableInputCell/date.es.js";
-import { DataGridDropdownCell as J, DropdownCell as K, getDataGridDropdownCell as M } from "./TableInputCell/dropdown.es.js";
-import { DataGridExpandingCell as O, ExpandingCell as Q } from "./TableInputCell/expanding.es.js";
-import { DataGridIconCell as X, IconCell as Y } from "./TableInputCell/icon.es.js";
-import { DataGridLabelCell as _, LabelCell as $ } from "./TableInputCell/label.es.js";
-import { DataGridSwitchCell as le, SwitchCell as ae } from "./TableInputCell/switch.es.js";
-import { DataGridTextInputCell as re, TextInputCell as oe, getDataGridTextInputCell as de } from "./TableInputCell/text.es.js";
-import { DataGridTextAreaInputCell as pe, TextAreaInputCell as De, getDataGridTextAreaInputCell as xe } from "./TableInputCell/textarea.es.js";
-import { TableRow as ne, getDataGridTableRow as Te } from "./TableRow/index.es.js";
-import { TableHeadCellVariant as Ge } from "./TableHeadCell/types.es.js";
+import { TableBody as x, getDataGridTableBody as n } from "./TableBody/DataGridTableBody.es.js";
+import { getDataGridTableBodyVirtual as b } from "./TableBody/DataGridTableBodyVirtual.es.js";
+import { DataGridTableCell as m, TableCell as f, TableCellContent as g, getDataGridTableCell as u } from "./TableCell/index.es.js";
+import { TableDropdownHeader as H, TableDropdownItem as I } from "./TableDropdown/index.es.js";
+import { TableHead as B, getDataGridTableHead as h } from "./TableHead/index.es.js";
+import { DataGridTableHeadCell as A, TableHeadCell as R, TableHeadCellResizer as k, getDataGridTableHeadCell as E } from "./TableHeadCell/index.es.js";
+import { TableHeadRow as P } from "./TableHeadRow/index.es.js";
+import { ButtonCell as V, DataGridButtonCell as s } from "./TableInputCell/button.es.js";
+import { CheckboxCell as F, DataGridCheckboxCell as W } from "./TableInputCell/checkbox.es.js";
+import { DataGridDateCell as q, DateCell as v, getDataGridDateCell as J } from "./TableInputCell/date.es.js";
+import { DataGridDropdownCell as M, DropdownCell as N, getDataGridDropdownCell as O } from "./TableInputCell/dropdown.es.js";
+import { DataGridExpandingCell as U, ExpandingCell as X } from "./TableInputCell/expanding.es.js";
+import { DataGridIconCell as Z, IconCell as _ } from "./TableInputCell/icon.es.js";
+import { DataGridLabelCell as ee, LabelCell as ae } from "./TableInputCell/label.es.js";
+import { DataGridSwitchCell as te, SwitchCell as re } from "./TableInputCell/switch.es.js";
+import { DataGridTextInputCell as de, TextInputCell as Ce, getDataGridTextInputCell as pe } from "./TableInputCell/text.es.js";
+import { DataGridTextAreaInputCell as ie, TextAreaInputCell as xe, getDataGridTextAreaInputCell as ne } from "./TableInputCell/textarea.es.js";
+import { getDataGridTableRow as be } from "./TableRow/index.es.js";
+import { TableHeadCellVariant as me } from "./TableHeadCell/types.es.js";
 export {
-  P as ButtonCell,
-  z as CheckboxCell,
+  V as ButtonCell,
+  F as CheckboxCell,
   r as ControlPanel,
   o as ControlPanelContent,
-  a as DataGrid,
-  S as DataGridButtonCell,
-  F as DataGridCheckboxCell,
-  W as DataGridDateCell,
-  J as DataGridDropdownCell,
-  O as DataGridExpandingCell,
-  X as DataGridIconCell,
-  _ as DataGridLabelCell,
-  le as DataGridSwitchCell,
+  l as DataGrid,
+  s as DataGridButtonCell,
+  W as DataGridCheckboxCell,
+  q as DataGridDateCell,
+  M as DataGridDropdownCell,
+  U as DataGridExpandingCell,
+  Z as DataGridIconCell,
+  ee as DataGridLabelCell,
+  te as DataGridSwitchCell,
   d as DataGridTable,
-  b as DataGridTableCell,
-  B as DataGridTableHeadCell,
-  pe as DataGridTextAreaInputCell,
-  re as DataGridTextInputCell,
-  j as DateCell,
-  K as DropdownCell,
-  Q as ExpandingCell,
-  Y as IconCell,
-  $ as LabelCell,
-  ae as SwitchCell,
+  m as DataGridTableCell,
+  A as DataGridTableHeadCell,
+  ie as DataGridTextAreaInputCell,
+  de as DataGridTextInputCell,
+  v as DateCell,
+  N as DropdownCell,
+  X as ExpandingCell,
+  _ as IconCell,
+  ae as LabelCell,
+  re as SwitchCell,
   C as Table,
-  i as TableBody,
-  G as TableCell,
-  m as TableCellContent,
-  w as TableDropdownHeader,
-  H as TableDropdownItem,
+  x as TableBody,
+  f as TableCell,
+  g as TableCellContent,
+  H as TableDropdownHeader,
+  I as TableDropdownItem,
   p as TableFooter,
-  u as TableHead,
+  B as TableHead,
   R as TableHeadCell,
-  A as TableHeadCellResizer,
-  Ge as TableHeadCellVariant,
-  E as TableHeadRow,
-  ne as TableRow,
+  k as TableHeadCellResizer,
+  me as TableHeadCellVariant,
+  P as TableHeadRow,
   D as TableWrapper,
-  De as TextAreaInputCell,
-  oe as TextInputCell,
-  q as getDataGridDateCell,
-  M as getDataGridDropdownCell,
+  xe as TextAreaInputCell,
+  Ce as TextInputCell,
+  J as getDataGridDateCell,
+  O as getDataGridDropdownCell,
   n as getDataGridTableBody,
-  f as getDataGridTableCell,
-  c as getDataGridTableHead,
-  k as getDataGridTableHeadCell,
-  Te as getDataGridTableRow,
-  xe as getDataGridTextAreaInputCell,
-  de as getDataGridTextInputCell
+  b as getDataGridTableBodyVirtual,
+  u as getDataGridTableCell,
+  h as getDataGridTableHead,
+  E as getDataGridTableHeadCell,
+  be as getDataGridTableRow,
+  ne as getDataGridTextAreaInputCell,
+  pe as getDataGridTextInputCell
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/types.d.ts

@@ -1,9 +1,13 @@
-import { ReactNode, TableHTMLAttributes } from 'react';
+import { ReactNode, RefObject, TableHTMLAttributes } from 'react';
 import { ColumnDef, RowData, TableOptions, Cell as ReactTableCell, Header, Row } from '@tanstack/react-table';
+import { VirtualizerOptions } from '@tanstack/react-virtual';
 import { ColumnItem } from '@join-x5/react-data-grid-settings';
 import { CSSProperties, QA } from '@join-x5/react-theme';
 import { TableCellProps } from 'TableCell/types';
 import { TableHeadCellProps } from 'TableHeadCell/types';
+import { TableRowProps } from './TableRow';
+import { TableBodyProps } from './TableBody';
+import { TableHeadProps } from './TableHead';
 type DefaultAny = any;
 export type DataGridColumn<T = DefaultAny, V = DefaultAny> = ColumnDef<T, V>;
 export type DataGridCellBooleanCallback<T = DefaultAny> = (cell: ReactTableCell<T, DefaultAny>) => boolean;
@@ -13,7 +17,12 @@ export type CellPropsCallback<T = DefaultAny> = (cell: ReactTableCell<T, Default
 export type HeadCellPropsCallback<T = DefaultAny> = (cell: Header<T, DefaultAny>) => Partial<TableHeadCellProps & {
     ref?: React.Ref<HTMLTableCellElement>;
 }>;
-export type GetDataGridTableRow<T = DefaultAny> = (row: Row<T>) => ReactNode;
+export type RowPropsCallback<T = DefaultAny> = (row: Row<T>) => Partial<TableRowProps & {
+    ref?: React.Ref<HTMLTableRowElement>;
+}>;
+export type GetDataGridTableRow<T = DefaultAny> = (row: Row<T>, props?: Partial<TableRowProps & {
+    ref?: React.Ref<HTMLTableRowElement>;
+}>) => ReactNode;
 export type TableComponents<T = DefaultAny> = {
     row?: GetDataGridTableRow<T>;
 };
@@ -29,6 +38,13 @@ export type DataGridProps<T = DefaultAny> = {
     columnSettings?: ColumnItem[];
     /** Перегрузка свойств TanStack Table (https://tanstack.com/table/latest/docs/introduction) */
     tableProps?: Partial<TableOptions<T>>;
+    /** Передача инстанса TanStack Table
+     *
+     * Используется для кастомизации
+     *
+     * Не используется `state` для хранения таблицы, используйте `ref`
+     */
+    setTable?: (table: any) => void;
     /** Флаг многострочности ячеек
      *
      * Если передан `true`, то все ячейки будут многострочными.
@@ -39,8 +55,26 @@ export type DataGridProps<T = DefaultAny> = {
     cellProps?: Partial<TableCellProps> | CellPropsCallback<T>;
     /** Свойства ячеек */
     headCellProps?: Partial<TableHeadCellProps> | HeadCellPropsCallback<T>;
+    /** Свойства строк */
+    rowProps?: Partial<TableRowProps> | RowPropsCallback<T>;
+    /** Свойства body */
+    bodyProps?: Partial<TableBodyProps>;
+    /** Свойства head */
+    headProps?: Partial<TableHeadProps>;
     /** Перегружаемые компоненты */
     components?: TableComponents;
+    /** Виртуализация
+     *
+     * По умолчанию = `false`
+     *
+     * Обязательна передача `wrapperRef`
+     */
+    virtualize?: boolean | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
+    /** Ref на TableWrapper
+     *
+     * Используется при виртуализации
+     */
+    wrapperRef?: RefObject<HTMLDivElement>;
 } & QA & Partial<Pick<TableCellProps, 'size' | 'isBordered' | 'isShadowed' | 'verticalAlign' | 'textAlign' | 'writingMode' | 'userSelect' | 'wordBreak' | 'whiteSpace'>> & Pick<CSSProperties, 'width'> & Omit<TableHTMLAttributes<HTMLTableElement>, 'width'>;
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@join-x5/react-data-grid",
-  "version": "1.3.1-alpha-0",
+  "version": "1.4.0",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs",
@@ -47,19 +47,20 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@join-x5/react": "1.3.0",
-    "@join-x5/react-data-grid-settings": "1.3.0",
-    "@join-x5/react-icons": "1.3.0",
-    "@join-x5/react-theme": "1.3.0",
-    "@tanstack/react-table": "^8.21.3"
+    "@join-x5/react": "1.4.0",
+    "@join-x5/react-data-grid-settings": "1.4.0",
+    "@join-x5/react-icons": "1.4.0",
+    "@join-x5/react-theme": "1.4.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.12"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6.2.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@join-x5/react": "1.3.0",
-    "@join-x5/react-icons": "1.3.0",
-    "@join-x5/react-theme": "1.3.0",
+    "@join-x5/react": "1.4.0",
+    "@join-x5/react-icons": "1.4.0",
+    "@join-x5/react-theme": "1.4.0",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   }

package/dist/TableBody/index.es.js

@@ -1,26 +0,0 @@
-"use client";
-import { jsx as l } from "@emotion/react/jsx-runtime";
-import R from "@emotion/styled/base";
-import { memo as e, useContext as i } from "react";
-import { DataGridContext as Z } from "../DataGridContext.es.js";
-import { getDataGridTableRow as a } from "../TableRow/index.es.js";
-const n = /* @__PURE__ */ R("tbody", process.env.NODE_ENV === "production" ? {
-  target: "e1p3q9a00"
-} : {
-  target: "e1p3q9a00",
-  label: "TableBody"
-})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3NhZHlrb3ZzZC9qb2luLXg1L3BhY2thZ2VzL2RhdGEtZ3JpZC9zcmMvVGFibGVCb2R5L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXcUMiLCJmaWxlIjoiL2hvbWUvc2FkeWtvdnNkL2pvaW4teDUvcGFja2FnZXMvZGF0YS1ncmlkL3NyYy9UYWJsZUJvZHkvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnO1xuXG5pbXBvcnQge21lbW8sIHVzZUNvbnRleHR9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHtEYXRhR3JpZENvbnRleHR9IGZyb20gJ0RhdGFHcmlkQ29udGV4dCc7XG5pbXBvcnQge2dldERhdGFHcmlkVGFibGVSb3d9IGZyb20gJ1RhYmxlUm93JztcblxuaW1wb3J0IHR5cGUge1RhYmxlfSBmcm9tICdAdGFuc3RhY2svcmVhY3QtdGFibGUnO1xuaW1wb3J0IHR5cGUge0RhdGFHcmlkUHJvcHN9IGZyb20gJ3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IFRhYmxlQm9keSA9IHN0eWxlZC50Ym9keWBgO1xuXG50eXBlIERhdGFHcmlkVGFibGVCb2R5UHJvcHMgPSB7XG4gIHRhYmxlOiBUYWJsZTx1bmtub3duPjtcbn0gJiBQaWNrPERhdGFHcmlkUHJvcHMsICdjb21wb25lbnRzJz47XG5cbmNvbnN0IERhdGFHcmlkVGFibGVCb2R5OiBSZWFjdC5GQzxEYXRhR3JpZFRhYmxlQm9keVByb3BzPiA9ICh7dGFibGUsIGNvbXBvbmVudHN9KSA9PiB7XG4gIGNvbnN0IGNvbnRleHQgPSB1c2VDb250ZXh0KERhdGFHcmlkQ29udGV4dCk7XG4gIGNvbnN0IHJvd3MgPSB0YWJsZS5nZXRSb3dNb2RlbCgpLnJvd3M7XG5cbiAgY29uc3QgaXRlcmF0b3IgPSBjb21wb25lbnRzPy5yb3cgPz8gZ2V0RGF0YUdyaWRUYWJsZVJvdztcblxuICByZXR1cm4gPFRhYmxlQm9keSBkYXRhLXFhPXtgJHtjb250ZXh0LnFhfS1ib2R5YH0+e3Jvd3MubWFwKGl0ZXJhdG9yKX08L1RhYmxlQm9keT47XG59O1xuXG5jb25zdCBNZW1vaXplZERhdGFHcmlkVGFibGVCb2R5ID0gbWVtbyhcbiAgRGF0YUdyaWRUYWJsZUJvZHksXG4gIChwcmV2LCBuZXh0KSA9PiBwcmV2LnRhYmxlLm9wdGlvbnMuZGF0YSA9PT0gbmV4dC50YWJsZS5vcHRpb25zLmRhdGFcbik7XG5cbmV4cG9ydCBjb25zdCBnZXREYXRhR3JpZFRhYmxlQm9keSA9IChcbiAgdGFibGU6IERhdGFHcmlkVGFibGVCb2R5UHJvcHNbJ3RhYmxlJ10sXG4gIGNvbXBvbmVudHM6IERhdGFHcmlkUHJvcHNbJ2NvbXBvbmVudHMnXVxuKSA9PiB7XG4gIGNvbnN0IGlzUmVzaXppbmcgPSB0YWJsZS5nZXRTdGF0ZSgpLmNvbHVtblNpemluZ0luZm8uaXNSZXNpemluZ0NvbHVtbjtcbiAgY29uc3QgQ29tcG9uZW50ID0gaXNSZXNpemluZyA/IE1lbW9pemVkRGF0YUdyaWRUYWJsZUJvZHkgOiBEYXRhR3JpZFRhYmxlQm9keTtcblxuICByZXR1cm4gPENvbXBvbmVudCB0YWJsZT17dGFibGV9IGNvbXBvbmVudHM9e2NvbXBvbmVudHN9IC8+O1xufTtcbiJdfQ== */"), m = ({
-  table: G,
-  components: b
-}) => {
-  const d = i(Z), c = G.getRowModel().rows, t = (b == null ? void 0 : b.row) ?? a;
-  return /* @__PURE__ */ l(n, { "data-qa": `${d.qa}-body`, children: c.map(t) });
-}, J = e(m, (G, b) => G.table.options.data === b.table.options.data), u = (G, b) => {
-  const c = G.getState().columnSizingInfo.isResizingColumn ? J : m;
-  return /* @__PURE__ */ l(c, { table: G, components: b });
-};
-export {
-  n as TableBody,
-  u as getDataGridTableBody
-};
-//# sourceMappingURL=index.es.js.map

package/dist/TableBody/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","sources":["../../src/TableBody/index.tsx"],"sourcesContent":["'use client';\n\nimport {memo, useContext} from 'react';\nimport styled from '@emotion/styled';\n\nimport {DataGridContext} from 'DataGridContext';\nimport {getDataGridTableRow} from 'TableRow';\n\nimport type {Table} from '@tanstack/react-table';\nimport type {DataGridProps} from 'types';\n\nexport const TableBody = styled.tbody``;\n\ntype DataGridTableBodyProps = {\n  table: Table<unknown>;\n} & Pick<DataGridProps, 'components'>;\n\nconst DataGridTableBody: React.FC<DataGridTableBodyProps> = ({table, components}) => {\n  const context = useContext(DataGridContext);\n  const rows = table.getRowModel().rows;\n\n  const iterator = components?.row ?? getDataGridTableRow;\n\n  return <TableBody data-qa={`${context.qa}-body`}>{rows.map(iterator)}</TableBody>;\n};\n\nconst MemoizedDataGridTableBody = memo(\n  DataGridTableBody,\n  (prev, next) => prev.table.options.data === next.table.options.data\n);\n\nexport const getDataGridTableBody = (\n  table: DataGridTableBodyProps['table'],\n  components: DataGridProps['components']\n) => {\n  const isResizing = table.getState().columnSizingInfo.isResizingColumn;\n  const Component = isResizing ? MemoizedDataGridTableBody : DataGridTableBody;\n\n  return <Component table={table} components={components} />;\n};\n"],"names":["table"],"mappings":";;;;;;AAWO;AAAe;AAAA;AAAA;AAAA;AAAA;AAMuC;AAACA;AAAiB;AAC7E;AAKA;AACF;AAYE;AAEA;AACF;;;;;"}

package/dist/TableRow/types.d.ts

@@ -1,2 +0,0 @@
-import { HTMLAttributes } from 'react';
-export type TableRowProps = HTMLAttributes<HTMLTableRowElement>;