nntc-ui 0.0.6 → 0.0.8

package/index.css

@@ -1561,9 +1561,6 @@ button[disabled] {
 .virtualTable_marginLeftChanging {
   background-color: var(--theme-table-header);
 }
-.virtualTable_marginTopChanging.virtualTable_marginLeftChanging {
-  z-index: 3;
-}
 .virtualTable_rightBorder {
   position: absolute;
   top: 0;
@@ -1676,12 +1673,22 @@ button[disabled] {
   display: flex;
   gap: 16px;
   align-items: center;
-  width: 424px;
-  padding: 16px 16px 0 16px;
+  width: 380px;
+  padding: 16px 8px 0 8px;
 }
 .numberFiltration_select {
   width: 120px;
 }
+.numberFiltration_inputsContainer {
+  display: flex;
+  flex: 1 1 0;
+  gap: 16px;
+  align-items: center;
+  width: 0;
+}
+.numberFiltration_input {
+  flex: 1 1 0;
+}
 
 /* src/components/view/TreeView/treeView.module.css */
 .treeView_search {

package/index.d.ts

@@ -273,7 +273,8 @@ declare function VirtualTable(props: UiProps<Props$7>): react_jsx_runtime.JSX.El
 
 interface FilterBy {
     columnName: string;
-    values: string[];
+    type: 'value' | 'range';
+    values: (string | number)[];
 }
 
 interface SortBy {

package/index.js

@@ -1992,7 +1992,6 @@ var virtualTable_default = {
   selected: "virtualTable_selected",
   sticky: "virtualTable_sticky",
   marginLeftChanging: "virtualTable_marginLeftChanging",
-  marginTopChanging: "virtualTable_marginTopChanging",
   rightBorder: "virtualTable_rightBorder",
   bottomBorder: "virtualTable_bottomBorder",
   viewCell: "virtualTable_viewCell",
@@ -2077,7 +2076,9 @@ import { useState as useState12 } from "react";
 // src/components/view/VirtualTable/ui/NumberFiltration/numberFiltration.module.css
 var numberFiltration_default = {
   root: "numberFiltration_root",
-  select: "numberFiltration_select"
+  select: "numberFiltration_select",
+  inputsContainer: "numberFiltration_inputsContainer",
+  input: "numberFiltration_input"
 };
 
 // src/components/view/VirtualTable/ui/NumberFiltration/NumberFiltration.tsx
@@ -2085,11 +2086,43 @@ import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-r
 var items = [
   { type: "item", name: "\u041E\u0442 \u2014 \u0434\u043E", value: "range" },
   { type: "item", name: "\u0411\u043E\u043B\u044C\u0448\u0435", value: "more" },
-  { type: "item", name: "\u041C\u0435\u043D\u044C\u0448\u0435", value: "less" }
+  { type: "item", name: "\u041C\u0435\u043D\u044C\u0448\u0435", value: "less" },
+  { type: "item", name: "\u0420\u0430\u0432\u043D\u043E", value: "equal" }
 ];
 function NumberFiltration(props) {
-  const {} = props;
-  const [selectedItem, setSelectedItem] = useState12(items[0]);
+  const { defaultValues = [-Infinity, Infinity], actionWithSelected } = props;
+  const [selectedItem, setSelectedItem] = useState12(
+    defaultValues[0] === -Infinity && defaultValues[1] === Infinity ? items[0] : defaultValues[0] === defaultValues[1] ? items[3] : defaultValues[0] === -Infinity ? items[2] : defaultValues[1] === Infinity ? items[1] : items[0]
+  );
+  const [values, setValues] = useState12(defaultValues);
+  const handleSelect = (item) => {
+    if (!!item) {
+      const newValues = [...values];
+      switch (item.value) {
+        case "more":
+          newValues[1] = Infinity;
+          break;
+        case "less":
+          newValues[0] = -Infinity;
+          break;
+        case "equal":
+          const val = newValues[0] !== -Infinity ? newValues[0] : newValues[1];
+          newValues[0] = val;
+          newValues[1] = val;
+          break;
+        default:
+          break;
+      }
+      setValues(newValues);
+      actionWithSelected(newValues);
+      setSelectedItem(item);
+    }
+  };
+  const handleChangeNumber = (type, value) => {
+    setValues(
+      (prev) => type === "equal" ? [value.length ? +value : -Infinity, value.length ? +value : Infinity] : type === "more" ? [value.length ? +value : -Infinity, prev[1]] : [prev[0], value.length ? +value : Infinity]
+    );
+  };
   return /* @__PURE__ */ jsxs17("div", { className: classnames20(numberFiltration_default.root), children: [
     /* @__PURE__ */ jsx31(
       Select,
@@ -2098,11 +2131,72 @@ function NumberFiltration(props) {
         componentSize: "small",
         variant: "filled",
         selected: selectedItem,
-        onValueChange: setSelectedItem,
-        classes: { root: numberFiltration_default.select }
+        onValueChange: handleSelect,
+        classes: { root: numberFiltration_default.select },
+        tabIndex: -1
       }
     ),
-    selectedItem?.value === "range" && /* @__PURE__ */ jsx31(Fragment5, {})
+    /* @__PURE__ */ jsx31("div", { className: classnames20(numberFiltration_default.inputsContainer), children: selectedItem.value === "range" ? /* @__PURE__ */ jsxs17(Fragment5, { children: [
+      /* @__PURE__ */ jsx31(
+        Input,
+        {
+          componentSize: "small",
+          variant: "outlined",
+          type: "number",
+          classes: { root: numberFiltration_default.input },
+          value: values[0] > -Infinity && values[0] < Infinity ? values[0] : "",
+          onChange: (e) => {
+            handleChangeNumber("more", e.target.value);
+          },
+          onBlur: () => actionWithSelected(values),
+          onKeyUp: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              actionWithSelected(values);
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx31(
+        Input,
+        {
+          componentSize: "small",
+          variant: "outlined",
+          type: "number",
+          classes: { root: numberFiltration_default.input },
+          value: values[1] > -Infinity && values[1] < Infinity ? values[1] : "",
+          onChange: (e) => {
+            handleChangeNumber("less", e.target.value);
+          },
+          onBlur: () => actionWithSelected(values),
+          onKeyUp: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              actionWithSelected(values);
+            }
+          }
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx31(
+      Input,
+      {
+        componentSize: "small",
+        variant: "outlined",
+        type: "number",
+        classes: { root: numberFiltration_default.input },
+        value: selectedItem.value === "more" ? values[0] > -Infinity && values[0] < Infinity ? values[0] : "" : values[1] > -Infinity && values[1] < Infinity ? values[1] : "",
+        onChange: (e) => {
+          handleChangeNumber(selectedItem.value, e.target.value);
+        },
+        onBlur: () => actionWithSelected(values),
+        onKeyUp: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            actionWithSelected(values);
+          }
+        }
+      }
+    ) })
   ] });
 }
 
@@ -2147,6 +2241,9 @@ function HeaderDropdown(props) {
     });
     return result;
   }, [filterBy, headerResultName]);
+  const filterNumbers = useMemo6(() => {
+    return filterBy.find((fb) => fb.columnName === headerResultName)?.values;
+  }, [filterBy, headerResultName]);
   const handleSortClick = (direction) => () => {
     setSortBy((prev) => {
       if (prev.some((p) => p.columnName === headerResultName && p.direction === direction)) {
@@ -2160,6 +2257,26 @@ function HeaderDropdown(props) {
       }
     });
   };
+  const actionWithSelectedNumbers = (values) => {
+    setFilterBy((prev) => {
+      if (values[0] === -Infinity && values[1] === Infinity) {
+        return [...prev.filter((p) => !(p.columnName === headerResultName && p.type === "range"))];
+      } else {
+        const newResult = [...prev];
+        const exist = newResult.find((p) => p.columnName === headerResultName && p.type === "range");
+        if (exist) {
+          exist.values = values;
+        } else {
+          newResult.push({
+            columnName: headerResultName,
+            type: "range",
+            values
+          });
+        }
+        return newResult;
+      }
+    });
+  };
   const actionWithSelectedObjects = (selected) => {
     Object.entries(selected).forEach(([key, value]) => {
       if (!value) {
@@ -2168,11 +2285,11 @@ function HeaderDropdown(props) {
     });
     setFilterBy((prev) => {
       const newResult = [...prev];
-      const exist = newResult.find((p) => p.columnName === headerResultName);
+      const exist = newResult.find((p) => p.columnName === headerResultName && p.type === "value");
       if (exist) {
         exist.values = Object.keys(selected);
       } else {
-        newResult.push({ columnName: headerResultName, values: Object.keys(selected) });
+        newResult.push({ columnName: headerResultName, type: "value", values: Object.keys(selected) });
       }
       return newResult;
     });
@@ -2188,7 +2305,7 @@ function HeaderDropdown(props) {
         wrapTrigger: true,
         root: containerRef,
         description: /* @__PURE__ */ jsxs18(Fragment6, { children: [
-          filtrationByNumber && /* @__PURE__ */ jsx32(NumberFiltration, {}),
+          filtrationByNumber && /* @__PURE__ */ jsx32(NumberFiltration, { defaultValues: filterNumbers, actionWithSelected: actionWithSelectedNumbers }),
           filtrationByValue && /* @__PURE__ */ jsx32("div", { className: classnames21(headerDropdown_default.checklistWrap), children: /* @__PURE__ */ jsx32(
             Checklist,
             {
@@ -2310,7 +2427,7 @@ var recursiveFilter = (items2, filterBy) => {
   if (filterBy.length) {
     const filterByItem = filterBy[filterBy.length - 1];
     const filtered = filterByItem.values.length ? items2.filter(
-      (item) => filterByItem.values.includes(item[filterByItem.columnName]?.value?.toString() ?? "") || item.isNew?.value === 1
+      (item) => item[filterByItem.columnName] && (filterByItem.type === "range" ? item[filterByItem.columnName].value >= filterByItem.values[0] && item[filterByItem.columnName].value <= filterByItem.values[1] : filterByItem.values.includes(item[filterByItem.columnName].value?.toString() ?? "")) || item.isNew?.value === 1
     ) : items2;
     return recursiveFilter(filtered, filterBy.slice(0, filterBy.length - 1));
   }
@@ -2359,9 +2476,11 @@ function VirtualTable(props) {
   const memoizedData = useMemo7(() => {
     const newRows = [...rows];
     const nextFilterBy = filterBy.filter(
-      (i) => rows.some((r) => i.values.includes(r[i.columnName]?.value?.toString() ?? ""))
+      (i) => rows.some(
+        (r) => r[i.columnName] && (i.type === "range" ? r[i.columnName].value >= i.values[0] && r[i.columnName].value <= i.values[1] : i.values.includes(r[i.columnName].value?.toString() ?? ""))
+      )
     );
-    const filtered = nextFilterBy.length ? recursiveFilter(newRows, nextFilterBy) : newRows;
+    const filtered = nextFilterBy.length ? recursiveFilter(newRows, nextFilterBy) : filterBy.some((fb) => fb.type === "range" && fb.values.some((v) => v !== Infinity && v !== -Infinity)) ? [] : newRows;
     const sorted = sortBy.length ? recursiveSort(filtered, sortBy) : filtered;
     return sorted;
   }, [rows, sortBy, filterBy]);
@@ -2398,7 +2517,7 @@ function VirtualTable(props) {
   });
   const columnVirtualizer = useVirtualizer({
     horizontal: true,
-    count: rowsFromTable[0]?.getAllCells().length ?? 1,
+    count: headerGroups[0]?.headers.length ?? 1,
     rangeExtractor: useCallback7((range) => {
       const stickyIndexes = [...Array(fixedColumnsCount)].map((_, index) => index);
       const next = /* @__PURE__ */ new Set([...stickyIndexes, ...defaultRangeExtractor(range)]);
@@ -2459,10 +2578,6 @@ function VirtualTable(props) {
   }, [tableContainerRef?.current?.clientHeight, rowsTotalSize]);
   useEffect8(() => {
     const scrollListener = function() {
-      const marginTopChangingElements = this.querySelectorAll(`.${virtualTable_default.marginTopChanging}`);
-      marginTopChangingElements?.forEach(
-        (element) => element.style.marginTop = `${this.scrollTop}px`
-      );
       const marginLeftChangingElements = this.querySelectorAll(`.${virtualTable_default.marginLeftChanging}`);
       marginLeftChangingElements?.forEach(
         (element) => element.style.marginLeft = `${this.scrollLeft}px`
@@ -2496,25 +2611,45 @@ function VirtualTable(props) {
           height: `${rowsTotalSize + summaryHeaderHeight}px`
         },
         children: [
-          /* @__PURE__ */ jsx33("div", { children: headerGroups.map((headerGroup, hgi) => {
-            const innerCell = (header) => {
-              const headerMeta = header.column.columnDef.meta;
-              return /* @__PURE__ */ jsx33("div", { className: classnames22(virtualTable_default.thCell), children: header.column.columnDef.id === header.column.columnDef["accessorKey"] && (headerMeta?.sortable || headerMeta?.filtrationByValue) ? /* @__PURE__ */ jsx33(
-                HeaderDropdown,
-                {
-                  sortable: headerMeta?.sortable ?? false,
-                  sortBy,
-                  setSortBy,
-                  sortAnotherName: headerMeta?.sortAnotherName,
-                  filtrationByNumber: headerMeta?.filtrationByNumber ?? false,
-                  filtrationByDate: headerMeta?.filtrationByDate ?? false,
-                  filtrationByValue: headerMeta?.filtrationByValue ?? false,
-                  filterBy,
-                  setFilterBy,
-                  items: rows,
-                  headerName: header.column.columnDef.id ?? header.id,
-                  containerRef: useTableContainerAsRootForPopup ? tableContainerRef : void 0,
-                  children: /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx33(
+            "div",
+            {
+              style: {
+                position: "sticky",
+                top: 0,
+                zIndex: 2,
+                marginLeft: 1
+              },
+              children: headerGroups.map((headerGroup, hgi) => {
+                const innerCell = (header) => {
+                  const headerMeta = header.column.columnDef.meta;
+                  return /* @__PURE__ */ jsx33("div", { className: classnames22(virtualTable_default.thCell), children: header.column.columnDef.id === header.column.columnDef["accessorKey"] && (headerMeta?.sortable || headerMeta?.filtrationByValue) ? /* @__PURE__ */ jsx33(
+                    HeaderDropdown,
+                    {
+                      sortable: headerMeta?.sortable ?? false,
+                      sortBy,
+                      setSortBy,
+                      sortAnotherName: headerMeta?.sortAnotherName,
+                      filtrationByNumber: headerMeta?.filtrationByNumber ?? false,
+                      filtrationByDate: headerMeta?.filtrationByDate ?? false,
+                      filtrationByValue: headerMeta?.filtrationByValue ?? false,
+                      filterBy,
+                      setFilterBy,
+                      items: rows,
+                      headerName: header.column.columnDef.id ?? header.id,
+                      containerRef: useTableContainerAsRootForPopup ? tableContainerRef : void 0,
+                      children: /* @__PURE__ */ jsx33(
+                        "div",
+                        {
+                          className: classnames22(
+                            virtualTable_default.label,
+                            !!headerMeta?.headerAlign ? virtualTable_default[`align${headerMeta?.headerAlign}`] : virtualTable_default.alignLeft
+                          ),
+                          children: flexRender(header.column.columnDef.header, header.getContext())
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx33(
                     "div",
                     {
                       className: classnames22(
@@ -2523,108 +2658,102 @@ function VirtualTable(props) {
                       ),
                       children: flexRender(header.column.columnDef.header, header.getContext())
                     }
-                  )
-                }
-              ) : /* @__PURE__ */ jsx33(
-                "div",
-                {
-                  className: classnames22(
-                    virtualTable_default.label,
-                    !!headerMeta?.headerAlign ? virtualTable_default[`align${headerMeta?.headerAlign}`] : virtualTable_default.alignLeft
-                  ),
-                  children: flexRender(header.column.columnDef.header, header.getContext())
-                }
-              ) });
-            };
-            return /* @__PURE__ */ jsxs19(Fragment7, { children: [
-              [...Array(fixedColumnsCount)].map((_, index) => {
-                const header = headerGroup.headers[index];
-                return /* @__PURE__ */ jsx33(
-                  "div",
-                  {
-                    className: classnames22(
-                      virtualTable_default.th,
-                      hgi === 0 ? virtualTable_default.firstThRow : void 0,
-                      virtualTable_default.marginTopChanging,
-                      virtualTable_default.marginLeftChanging
-                    ),
-                    style: {
-                      zIndex: 3,
-                      width: `${columnsEstimateSize(index)}px`,
-                      height: `${headerGroupHeight[hgi]}px`,
-                      transform: `translateX(${index > 0 ? columnsEstimateSize(index - 1) : 0}px) translateY(${headerGroupY(hgi)}px)`
-                    },
-                    children: innerCell(header)
-                  },
-                  `${headerGroup.id}-${header.id}`
-                );
-              }),
-              virtualColumns.map((column) => {
-                if (column.index > fixedColumnsCount - 1) {
-                  const header = headerGroup.headers[column.index];
-                  const nextHorizontalHeaders = getNextHorizontalHeaders(
-                    headerGroup.headers,
-                    column.index,
-                    lastVirtualColumnIndex
-                  );
-                  const prevHorizontalHeaders = getPrevHorizontalHeaders(headerGroup.headers, column.index);
-                  const nextVerticalHeaders = getNextVerticalHeaders(headerGroups, hgi, column.index);
-                  const prevVerticalHeaders = getPrevVerticalHeaders(headerGroups, hgi, column.index);
-                  const thWidth = !nextHorizontalHeaders.length && !prevHorizontalHeaders.length ? column.size : column.size + nextHorizontalHeaders.reduce(
-                    (sum, current) => sum + (current.column.columnDef.meta?.width ?? 0),
-                    0
-                  );
-                  const zIndex = !nextHorizontalHeaders.length && !prevHorizontalHeaders.length ? void 0 : nextHorizontalHeaders.length + 2;
-                  const thHeight = !prevVerticalHeaders.length ? headerGroupHeight[hgi] : headerGroupHeight[hgi] + prevVerticalHeaders.reduce(
-                    (sum, _, index) => sum + (headerGroupHeight[hgi - index - 1] ?? 0),
-                    0
-                  );
-                  const translateY = !prevVerticalHeaders.length ? headerGroupY(hgi) : headerGroupY(hgi) - prevVerticalHeaders.reduce(
-                    (sum, _, index) => sum + (headerGroupHeight[hgi - index - 1] ?? 0),
-                    0
-                  );
-                  return /* @__PURE__ */ jsx33(
+                  ) });
+                };
+                return /* @__PURE__ */ jsxs19(Fragment7, { children: [
+                  [...Array(fixedColumnsCount)].map((_, index) => {
+                    const header = headerGroup.headers[index];
+                    const nextHorizontalHeaders = getNextHorizontalHeaders(
+                      headerGroup.headers,
+                      index,
+                      lastVirtualColumnIndex
+                    );
+                    const nextVerticalHeaders = getNextVerticalHeaders(headerGroups, hgi, index);
+                    return /* @__PURE__ */ jsx33(
+                      "div",
+                      {
+                        className: classnames22(
+                          virtualTable_default.th,
+                          hgi === 0 ? virtualTable_default.firstThRow : void 0,
+                          !nextVerticalHeaders.length && index !== headerGroup.headers.length - 1 && virtualTable_default.thRightBorder,
+                          index === 0 && virtualTable_default.thLeftBorder,
+                          nextVerticalHeaders.length && !nextHorizontalHeaders.length && virtualTable_default.thHiddenColumn,
+                          virtualTable_default.marginLeftChanging
+                        ),
+                        style: {
+                          zIndex: 3,
+                          width: `${columnsEstimateSize(index)}px`,
+                          height: `${headerGroupHeight[hgi]}px`,
+                          transform: `translateX(${index > 0 ? columnsEstimateSize(index - 1) : 0}px) translateY(${headerGroupY(hgi)}px)`
+                        },
+                        children: innerCell(header)
+                      },
+                      `${headerGroup.id}-${header.id}`
+                    );
+                  }),
+                  virtualColumns.map((column) => {
+                    if (column.index > fixedColumnsCount - 1) {
+                      const header = headerGroup.headers[column.index];
+                      const nextHorizontalHeaders = getNextHorizontalHeaders(
+                        headerGroup.headers,
+                        column.index,
+                        lastVirtualColumnIndex
+                      );
+                      const prevHorizontalHeaders = getPrevHorizontalHeaders(headerGroup.headers, column.index);
+                      const nextVerticalHeaders = getNextVerticalHeaders(headerGroups, hgi, column.index);
+                      const prevVerticalHeaders = getPrevVerticalHeaders(headerGroups, hgi, column.index);
+                      const thWidth = !nextHorizontalHeaders.length && !prevHorizontalHeaders.length ? column.size : column.size + nextHorizontalHeaders.reduce(
+                        (sum, current) => sum + (current.column.columnDef.meta?.width ?? 0),
+                        0
+                      );
+                      const zIndex = !nextHorizontalHeaders.length && !prevHorizontalHeaders.length ? void 0 : nextHorizontalHeaders.length + 2;
+                      const thHeight = !prevVerticalHeaders.length ? headerGroupHeight[hgi] : headerGroupHeight[hgi] + prevVerticalHeaders.reduce(
+                        (sum, _, index) => sum + (headerGroupHeight[hgi - index - 1] ?? 0),
+                        0
+                      );
+                      const translateY = !prevVerticalHeaders.length ? headerGroupY(hgi) : headerGroupY(hgi) - prevVerticalHeaders.reduce(
+                        (sum, _, index) => sum + (headerGroupHeight[hgi - index - 1] ?? 0),
+                        0
+                      );
+                      return /* @__PURE__ */ jsx33(
+                        "div",
+                        {
+                          className: classnames22(
+                            virtualTable_default.th,
+                            hgi === 0 && virtualTable_default.firstThRow,
+                            !nextVerticalHeaders.length && column.index !== headerGroup.headers.length - 1 && virtualTable_default.thRightBorder,
+                            column.index === 0 && virtualTable_default.thLeftBorder,
+                            nextVerticalHeaders.length && !nextHorizontalHeaders.length && virtualTable_default.thHiddenColumn
+                          ),
+                          style: {
+                            width: `${thWidth}px`,
+                            zIndex,
+                            height: `${thHeight}px`,
+                            transform: `translateX(${column.start + (!!fixedColumnsCount ? -2 : 0)}px) translateY(${translateY}px)`,
+                            borderTop: translateY === 0 ? "1px solid var(--border-color)" : void 0
+                          },
+                          children: innerCell(header)
+                        },
+                        `${headerGroup.id}-${header.id}`
+                      );
+                    }
+                    return null;
+                  }),
+                  !!rowButtons && /* @__PURE__ */ jsx33(
                     "div",
                     {
-                      className: classnames22(
-                        virtualTable_default.th,
-                        hgi === 0 && virtualTable_default.firstThRow,
-                        !nextVerticalHeaders.length && column.index !== headerGroup.headers.length - 1 && virtualTable_default.thRightBorder,
-                        column.index === 0 && virtualTable_default.thLeftBorder,
-                        nextVerticalHeaders.length && !nextHorizontalHeaders.length && virtualTable_default.thHiddenColumn,
-                        virtualTable_default.marginTopChanging
-                      ),
+                      className: classnames22(virtualTable_default.th, hgi === 0 ? virtualTable_default.firstThRow : void 0),
                       style: {
-                        width: `${thWidth}px`,
-                        zIndex,
-                        height: `${thHeight}px`,
-                        transform: `translateX(${column.start + (!!fixedColumnsCount ? -2 : 0)}px) translateY(${translateY}px)`,
-                        borderTop: translateY === 0 ? "1px solid var(--border-color)" : void 0
-                      },
-                      children: innerCell(header)
-                    },
-                    `${headerGroup.id}-${header.id}`
-                  );
-                }
-                return null;
-              }),
-              !!rowButtons && /* @__PURE__ */ jsx33(
-                "div",
-                {
-                  className: classnames22(
-                    virtualTable_default.th,
-                    hgi === 0 ? virtualTable_default.firstThRow : void 0,
-                    virtualTable_default.marginTopChanging
-                  ),
-                  style: {
-                    width: `${rowActionWidth}px`,
-                    height: `${headerGroupHeight[hgi]}px`,
-                    transform: `translateX(${columnsTotalSize + (!!fixedColumnsCount ? -2 : 0)}px) translateY(${headerGroupY(hgi)}px)`
-                  }
-                }
-              )
-            ] }, headerGroup.id);
-          }) }),
+                        width: `${rowActionWidth}px`,
+                        height: `${headerGroupHeight[hgi]}px`,
+                        transform: `translateX(${columnsTotalSize + (!!fixedColumnsCount ? -2 : 0)}px) translateY(${headerGroupY(hgi)}px)`
+                      }
+                    }
+                  )
+                ] }, headerGroup.id);
+              })
+            }
+          ),
           virtualRows.map((virtualRow) => {
             const row = rowsFromTable[virtualRow.index];
             return /* @__PURE__ */ jsxs19(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nntc-ui",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "React UI-kit for NNTC",
   "type": "module",
   "exports": {