nntc-ui 0.0.14 → 0.0.16

package/README.md

@@ -1,3 +1,17 @@
+# Статус деплоя на стендах
+
+| Стенд | Статус |
+|-------|--------|
+| iifa-dev | [![Status](https://argocd.np.nntc.pro/api/badge?name=iifa-dev-nntc-ui-kit)](https://argocd.np.nntc.pro/applications/argocd/iifa-dev-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Fiifa-dev%2Fnntc-ui-kit%2F0&tab=logs) |
+| iifa-test | [![Status](https://argocd.np.nntc.pro/api/badge?name=iifa-test-nntc-ui-kit)](https://argocd.np.nntc.pro/applications/argocd/iifa-test-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Fiifa-test%2Fnntc-ui-kit%2F0&tab=logs) |
+| geonova-test | [![Status](https://argocd.np.nntc.pro/api/badge?name=geonova-test-nntc-ui-kit)](https://argocd.np.nntc.pro/applications/argocd/geonova-test-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Fgeonova-test%2Fnntc-ui-kit%2F0&tab=logs) |
+| iifa-demo | [![Status](https://argocd.pp.nntc.pro/api/badge?name=iifa-demo-nntc-ui-kit)](https://argocd.pp.nntc.pro/applications/argocd/iifa-demo-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Fiifa-demo%2Fnntc-ui-kit%2F0&tab=logs) |
+| ars-demo | [![Status](https://argocd.pp.nntc.pro/api/badge?name=ars-demo-nntc-ui-kit)](https://argocd.pp.nntc.pro/applications/argocd/ars-demo-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%ars-demo%2Fnntc-ui-kit%2F0&tab=logs) |
+| geonova-demo | [![Status](https://argocd.pp.nntc.pro/api/badge?name=geonova-demo-nntc-ui-kit)](https://argocd.pp.nntc.pro/applications/argocd/geonova-demo-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Fgeonova-demo%2Fnntc-ui-kit%2F0&tab=logs) |
+| dflow-demo | [![Status](https://argocd.pp.nntc.pro/api/badge?name=dflow-demo-nntc-ui-kit)](https://argocd.pp.nntc.pro/applications/argocd/dflow-demo-nntc-ui-kit?view=tree&resource=&node=apps%2FDeployment%2Fdflow-demo%2Fnntc-ui-kit%2F0&tab=logs) |
+
+Для перехода к логам нажмите на иконку в колонке статуса
+
 # NNTC UI Kit
 
 React компонентная библиотека для создания пользовательских интерфейсов.

package/index.css

@@ -632,6 +632,9 @@ button[disabled] {
   letter-spacing: var(--text-overline-letter);
   border-bottom: 1px solid var(--theme-divider);
 }
+.menu_checkbox {
+  width: 24px;
+}
 
 /* src/components/common/DateTime/dateTime.module.css */
 .dateTime_root {
@@ -1468,8 +1471,15 @@ button[disabled] {
 .virtualTable_tableContainer {
   height: calc(100% + 16px);
 }
+.virtualTable_root.virtualTable_small .virtualTable_table {
+  font-size: var(--text-body2-size);
+}
+.virtualTable_root.virtualTable_medium .virtualTable_table {
+  font-size: var(--text-body1-size);
+}
 .virtualTable_table {
   position: relative;
+  color: var(--theme-text-primary);
 }
 .virtualTable_th {
   position: absolute;
@@ -1477,19 +1487,26 @@ button[disabled] {
   left: 0;
   z-index: 2;
   padding: 6px 12px;
+  color: var(--theme-text-secondary);
   background-color: var(--theme-table-header);
+}
+.virtualTable_root.virtualTable_bordersAll .virtualTable_th,
+.virtualTable_root.virtualTable_bordersHorizontal .virtualTable_th {
   border-bottom: 1px solid var(--border-color);
 }
-.virtualTable_thLeftBorder {
+.virtualTable_root.virtualTable_bordersAll .virtualTable_thLeftBorder,
+.virtualTable_root.virtualTable_bordersVertical .virtualTable_thLeftBorder {
   border-left: 1px solid var(--border-color);
 }
-.virtualTable_thRightBorder {
+.virtualTable_root.virtualTable_bordersAll .virtualTable_thRightBorder,
+.virtualTable_root.virtualTable_bordersVertical .virtualTable_thRightBorder {
   border-right: 1px solid var(--border-color);
 }
 .virtualTable_thHiddenColumn {
   display: none;
 }
-.virtualTable_firstThRow {
+.virtualTable_root.virtualTable_bordersAll .virtualTable_firstThRow,
+.virtualTable_root.virtualTable_root.virtualTable_bordersHorizontal .virtualTable_firstThRow {
   border-top: 1px solid var(--border-color);
 }
 .virtualTable_thCell {
@@ -1502,6 +1519,7 @@ button[disabled] {
 }
 .virtualTable_label {
   display: flex;
+  gap: 4px;
   align-items: center;
 }
 .virtualTable_label.virtualTable_alignLeft {
@@ -1528,9 +1546,13 @@ button[disabled] {
   z-index: 1;
   display: flex;
   background-color: var(--theme-table-background);
+}
+.virtualTable_root.virtualTable_bordersAll .virtualTable_tr,
+.virtualTable_root.virtualTable_root.virtualTable_bordersHorizontal .virtualTable_tr {
   border-top: 1px solid var(--border-color);
 }
-.virtualTable_tr:last-child {
+.virtualTable_root.virtualTable_bordersAll .virtualTable_tr:last-child,
+.virtualTable_root.virtualTable_bordersHorizontal .virtualTable_tr:last-child {
   border-bottom: 1px solid var(--border-color);
 }
 .virtualTable_td {
@@ -1538,10 +1560,12 @@ button[disabled] {
   align-items: center;
   padding: 0;
 }
-.virtualTable_td:nth-child(2) {
+.virtualTable_root.virtualTable_bordersAll .virtualTable_td:nth-child(2),
+.virtualTable_root.virtualTable_root.virtualTable_bordersVertical .virtualTable_td:nth-child(2) {
   border-left: 1px solid var(--border-color);
 }
-.virtualTable_td:not(:nth-last-child(2)) {
+.virtualTable_root.virtualTable_bordersAll .virtualTable_td:not(:nth-last-child(2)),
+.virtualTable_root.virtualTable_root.virtualTable_bordersVertical .virtualTable_td:not(:nth-last-child(2)) {
   border-right: 1px solid var(--border-color);
 }
 .virtualTable_evenRow {

package/index.d.ts

@@ -12,10 +12,10 @@ type UiProps<P = unknown> = P & {
 };
 
 type Variant$7 = 'filled' | 'outlined' | 'text' | 'elevated' | 'tonal' | 'link';
-type Size$9 = 'medium' | 'small';
+type Size$a = 'medium' | 'small';
 interface Props$m {
     variant?: Variant$7;
-    size?: Size$9;
+    size?: Size$a;
     icon?: ReactNode;
     textSecondary?: boolean;
     isActive?: boolean;
@@ -24,10 +24,10 @@ declare const Button: React.ForwardRefExoticComponent<Omit<React.ClassAttributes
     classes?: PropsObject;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type Size$8 = 'medium' | 'large';
+type Size$9 = 'medium' | 'large';
 interface Props$l {
     label?: string;
-    componentSize?: Size$8;
+    componentSize?: Size$9;
     several?: boolean;
 }
 declare function Checkbox(props: UiProps<Props$l> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
@@ -51,10 +51,10 @@ interface Item$5 {
 type MaybeItem = Maybe<Item$5>;
 
 type Variant$6 = 'filled' | 'outlined';
-type Size$7 = 'medium' | 'small';
+type Size$8 = 'medium' | 'small';
 interface Props$k {
     variant?: Variant$6;
-    componentSize?: Size$7;
+    componentSize?: Size$8;
     icon?: ReactNode;
     fullWidth?: boolean;
     label?: string;
@@ -66,10 +66,10 @@ interface Props$k {
 declare function Select(props: UiProps<Props$k> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
 
 type Variant$5 = 'filled' | 'outlined';
-type Size$6 = 'medium' | 'small';
+type Size$7 = 'medium' | 'small';
 interface Props$j {
     variant?: Variant$5;
-    componentSize?: Size$6;
+    componentSize?: Size$7;
     fullWidth?: boolean;
     placeholder?: string;
     values?: (string | undefined)[];
@@ -80,10 +80,10 @@ interface Props$j {
 declare function DateTime(props: UiProps<Props$j> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
 
 type Variant$4 = 'outlined';
-type Size$5 = 'medium' | 'small';
+type Size$6 = 'medium' | 'small';
 interface Props$i {
     variant?: Variant$4;
-    componentSize?: Size$5;
+    componentSize?: Size$6;
     fullWidth?: boolean;
     label?: string;
     onValueChange?: (newValue: string) => void;
@@ -91,28 +91,28 @@ interface Props$i {
 declare const ColorPicker: (props: UiProps<Props$i> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => react_jsx_runtime.JSX.Element;
 
 type Variant$3 = 'outlined';
-type Size$4 = 'medium' | 'small';
+type Size$5 = 'medium' | 'small';
 interface Props$h {
     variant?: Variant$3;
-    componentSize?: Size$4;
+    componentSize?: Size$5;
     fullWidth?: boolean;
     label?: string;
 }
 declare const Input: (props: UiProps<Props$h> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => react_jsx_runtime.JSX.Element;
 
 type Variant$2 = 'filled' | 'outlined';
-type Size$3 = 'medium' | 'small';
+type Size$4 = 'medium' | 'small';
 interface Props$g {
     variant?: Variant$2;
-    componentSize?: Size$3;
+    componentSize?: Size$4;
     disableIcon?: boolean;
     fullWidth?: boolean;
 }
 declare function SearchInput(props: UiProps<Props$g> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
 
-type Size$2 = 'medium' | 'small';
+type Size$3 = 'medium' | 'small';
 interface Props$f {
-    componentSize?: Size$2;
+    componentSize?: Size$3;
 }
 declare const WrapForLabel: (props: UiProps<PropsWithChildren<Props$f>>) => react_jsx_runtime.JSX.Element;
 
@@ -127,10 +127,10 @@ interface Item$4 {
 type TitleVariant = 'allValue' | 'numberValue' | 'firstValue';
 
 type Variant$1 = 'filled' | 'outlined';
-type Size$1 = 'medium' | 'small';
+type Size$2 = 'medium' | 'small';
 interface Props$e {
     variant?: Variant$1;
-    componentSize?: Size$1;
+    componentSize?: Size$2;
     icon?: ReactNode;
     fullWidth?: boolean;
     label?: string;
@@ -195,14 +195,15 @@ interface Item$2 {
         onClick?: () => void;
     }[];
     onClick?: () => void;
+    withCheckbox?: boolean;
     selected?: boolean;
     disabled?: boolean;
 }
 
-type Size = 'medium' | 'small';
+type Size$1 = 'medium' | 'small';
 interface Props$9 {
     items: (Item$2 | Divider)[];
-    size?: Size;
+    size?: Size$1;
 }
 declare function Menu(props: UiProps<Props$9>): react_jsx_runtime.JSX.Element;
 
@@ -258,6 +259,8 @@ interface TableColumn {
     toFixed?: number;
 }
 
+type Size = 'medium' | 'small';
+type Borders = 'all' | 'horizontal' | 'vertical' | 'none';
 interface Props$7 {
     rows: TableRow[];
     columns: TableColumn[];
@@ -276,8 +279,9 @@ interface Props$7 {
     height?: number;
     scrollToBottom?: boolean;
     useTableContainerAsRootForPopup?: boolean;
-    headerFontSize?: number;
-    rowFontSize?: number;
+    size?: Size;
+    borders?: Borders;
+    showUniqueValuesCount?: boolean;
 }
 declare function VirtualTable(props: UiProps<Props$7>): react_jsx_runtime.JSX.Element;
 

package/index.js

@@ -141,7 +141,7 @@ var checkbox_default = {
 // src/components/common/Checkbox/Checkbox.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function Checkbox(props) {
-  const { label, several, componentSize = "medium", classes, id, checked, ref, ...inputProps } = props;
+  const { label, several, componentSize = "medium", classes, id, ref, ...inputProps } = props;
   const { t } = useTranslation();
   const inputRef = useRef(null);
   const inputId = id ?? uuidv4();
@@ -441,7 +441,8 @@ var menu_default = {
   itemIcon: "menu_itemIcon",
   itemTitle: "menu_itemTitle",
   itemDescription: "menu_itemDescription",
-  divider: "menu_divider"
+  divider: "menu_divider",
+  checkbox: "menu_checkbox"
 };
 
 // src/components/navigation/Menu/Menu.tsx
@@ -472,6 +473,7 @@ function Menu(props) {
         onClick: !item.disabled ? handleClick(item) : void 0,
         title: item.name,
         children: /* @__PURE__ */ jsxs4("span", { className: classnames5(menu_default.stateLayer), children: [
+          !!item.withCheckbox && /* @__PURE__ */ jsx10(Checkbox, { checked: item.selected, classes: { root: menu_default.checkbox } }),
           !!item.icon && /* @__PURE__ */ jsx10(
             "span",
             {
@@ -1293,6 +1295,7 @@ var WrapForLabel = (props) => {
 // src/components/common/MultiSelect/MultiSelect.tsx
 import classnames11 from "classnames";
 import { useCallback as useCallback6, useMemo as useMemo3, useRef as useRef7 } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
 import { mergeRefs as mergeRefs7 } from "react-merge-refs";
 import { v4 as uuidv45 } from "uuid";
 
@@ -1334,7 +1337,8 @@ function SelectPopover2(props) {
           selected: selected?.includes(i.value),
           onClick: () => {
             changeSelectedItem(i);
-          }
+          },
+          withCheckbox: true
         })
       )
     }
@@ -1342,8 +1346,7 @@ function SelectPopover2(props) {
 }
 
 // src/components/common/MultiSelect/utils/getTitle.ts
-var getTitle = (titleType, activeItems) => {
-  const { t } = useTranslation();
+var getTitle = (titleType, activeItems, t) => {
   switch (titleType) {
     case "allValue": {
       return activeItems.map((i) => i.name).join(", ");
@@ -1377,6 +1380,7 @@ function MultiSelect(props) {
     titleType = "allValue",
     ...inputProps
   } = props;
+  const { t } = useTranslation2();
   const inputRef = useRef7(null);
   const popoverTargetRef = useRef7(null);
   const activeItems = useMemo3(() => items2.filter((i) => selected?.includes(i.value)), [selected, items2]);
@@ -1399,8 +1403,8 @@ function MultiSelect(props) {
   const title = useMemo3(() => {
     if (!activeItems.length)
       return "";
-    return getTitle(titleType, activeItems);
-  }, [titleType, activeItems.length]);
+    return getTitle(titleType, activeItems, t);
+  }, [titleType, activeItems]);
   const clearHandler = () => {
     onValueChange?.(null);
   };
@@ -1977,6 +1981,11 @@ function Tooltip(props) {
   );
 }
 
+// src/utils/toFirstLetterUpperCase.ts
+var toFirstLetterUpperCase = (name) => {
+  return name[0].toUpperCase() + name.substring(1);
+};
+
 // src/components/view/VirtualTable/constants/defaultRowHeight.ts
 var defaultRowHeight = 32;
 
@@ -2022,9 +2031,14 @@ function Modal(props) {
 var virtualTable_default = {
   root: "virtualTable_root",
   tableContainer: "virtualTable_tableContainer",
+  small: "virtualTable_small",
   table: "virtualTable_table",
+  medium: "virtualTable_medium",
   th: "virtualTable_th",
+  bordersAll: "virtualTable_bordersAll",
+  bordersHorizontal: "virtualTable_bordersHorizontal",
   thLeftBorder: "virtualTable_thLeftBorder",
+  bordersVertical: "virtualTable_bordersVertical",
   thRightBorder: "virtualTable_thRightBorder",
   thHiddenColumn: "virtualTable_thHiddenColumn",
   firstThRow: "virtualTable_firstThRow",
@@ -2300,6 +2314,7 @@ function HeaderDropdown(props) {
     headerName,
     items: items2,
     containerRef,
+    showUniqueValuesCount,
     children
   } = props;
   const headerResultName = sortAnotherName ?? headerName;
@@ -2404,8 +2419,8 @@ function HeaderDropdown(props) {
   const hasAnyFilter = Object.keys(filterSelectedItems).length || sortBy.some((sb) => sb.columnName === headerResultName);
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs18("div", { className: classnames22(headerDropdown_default.root), children: [
-    children,
-    /* @__PURE__ */ jsx33(
+    children?.(showUniqueValuesCount && /* @__PURE__ */ jsx33("div", { children: `(${filterItems2.length})` })),
+    (sortable || filtrationByValue || filtrationByDate || filtrationByNumber) && /* @__PURE__ */ jsx33(
       Popover,
       {
         placement: "bottom-end",
@@ -2562,7 +2577,7 @@ var recursiveSort = (items2, sortBy) => {
 };
 
 // src/components/view/VirtualTable/VirtualTable.tsx
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 function VirtualTable(props) {
   const {
     rows,
@@ -2580,8 +2595,9 @@ function VirtualTable(props) {
     height,
     scrollToBottom,
     useTableContainerAsRootForPopup,
-    headerFontSize = 16,
-    rowFontSize = 16
+    size = "small",
+    borders = "horizontal",
+    showUniqueValuesCount = false
   } = props;
   const [filterBy, setFilterBy] = useState14([]);
   const [sortBy, setSortBy] = useState14([{ columnName: "isNew", direction: "desc" }]);
@@ -2721,39 +2737,64 @@ function VirtualTable(props) {
     fixedColumnsCount && virtualColumns[fixedColumnsCount].index !== fixedColumnsCount ? virtualColumns[fixedColumnsCount].start - fixedColumnsWidth : virtualColumns[0].start,
     columnsTotalSize - virtualColumns[virtualColumns.length - 1].end
   ] : [0, 0];
-  return /* @__PURE__ */ jsx34("div", { className: classnames23(virtualTable_default.root, classes?.root), style: height ? { height } : void 0, children: /* @__PURE__ */ jsxs19("div", { ref: tableContainerRef, className: classnames23(virtualTable_default.tableContainer, "styledScroll"), children: [
-    /* @__PURE__ */ jsxs19(
-      "div",
-      {
-        className: virtualTable_default.table,
-        style: {
-          height: `${rowsTotalSize + summaryHeaderHeight}px`
-        },
-        children: [
-          /* @__PURE__ */ jsx34(
-            "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__ */ jsx34("div", { className: classnames23(virtualTable_default.thCell), children: header.column.columnDef.id === header.column.columnDef["accessorKey"] && (headerMeta?.sortable || headerMeta?.filtrationByValue) ? /* @__PURE__ */ jsx34(
-                    HeaderDropdown,
-                    {
-                      headerMeta,
-                      sortBy,
-                      setSortBy,
-                      filterBy,
-                      setFilterBy,
-                      items: rows,
-                      headerName: header.column.columnDef.id ?? header.id,
-                      containerRef: useTableContainerAsRootForPopup ? tableContainerRef : void 0,
-                      children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx34(
+    "div",
+    {
+      className: classnames23(
+        virtualTable_default.root,
+        virtualTable_default[size],
+        virtualTable_default[`borders${toFirstLetterUpperCase(borders)}`],
+        classes?.root
+      ),
+      style: height ? { height } : void 0,
+      children: /* @__PURE__ */ jsxs19("div", { ref: tableContainerRef, className: classnames23(virtualTable_default.tableContainer, "styledScroll"), children: [
+        /* @__PURE__ */ jsxs19(
+          "div",
+          {
+            className: virtualTable_default.table,
+            style: {
+              height: `${rowsTotalSize + summaryHeaderHeight}px`
+            },
+            children: [
+              /* @__PURE__ */ jsx34(
+                "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__ */ jsx34("div", { className: classnames23(virtualTable_default.thCell), children: header.column.columnDef.id === header.column.columnDef["accessorKey"] && (headerMeta?.sortable || headerMeta?.filtrationByValue || headerMeta?.filtrationByDate || headerMeta?.filtrationByNumber || headerMeta && showUniqueValuesCount) ? /* @__PURE__ */ jsx34(
+                        HeaderDropdown,
+                        {
+                          headerMeta,
+                          sortBy,
+                          setSortBy,
+                          filterBy,
+                          setFilterBy,
+                          items: rows,
+                          headerName: header.column.columnDef.id ?? header.id,
+                          containerRef: useTableContainerAsRootForPopup ? tableContainerRef : void 0,
+                          showUniqueValuesCount,
+                          children: (afterNode) => /* @__PURE__ */ jsxs19(
+                            "div",
+                            {
+                              className: classnames23(
+                                virtualTable_default.label,
+                                !!headerMeta?.headerAlign ? virtualTable_default[`align${headerMeta?.headerAlign}`] : virtualTable_default.alignLeft
+                              ),
+                              children: [
+                                flexRender(header.column.columnDef.header, header.getContext()),
+                                afterNode
+                              ]
+                            }
+                          )
+                        }
+                      ) : /* @__PURE__ */ jsx34(
                         "div",
                         {
                           className: classnames23(
@@ -2762,205 +2803,195 @@ function VirtualTable(props) {
                           ),
                           children: flexRender(header.column.columnDef.header, header.getContext())
                         }
-                      )
-                    }
-                  ) : /* @__PURE__ */ jsx34(
-                    "div",
-                    {
-                      className: classnames23(
-                        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];
-                    const nextHorizontalHeaders = getNextHorizontalHeaders(
-                      headerGroup.headers,
-                      index,
-                      lastVirtualColumnIndex
-                    );
-                    const nextVerticalHeaders = getNextVerticalHeaders(headerGroups, hgi, index);
-                    return /* @__PURE__ */ jsx34(
-                      "div",
-                      {
-                        className: classnames23(
-                          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)`,
-                          fontSize: `${headerFontSize}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__ */ jsx34(
+                      ) });
+                    };
+                    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__ */ jsx34(
+                          "div",
+                          {
+                            className: classnames23(
+                              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__ */ jsx34(
+                            "div",
+                            {
+                              className: classnames23(
+                                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: borders !== "none" && translateY === 0 ? "1px solid var(--border-color)" : void 0
+                              },
+                              children: innerCell(header)
+                            },
+                            `${headerGroup.id}-${header.id}`
+                          );
+                        }
+                        return null;
+                      }),
+                      !!rowButtons && /* @__PURE__ */ jsx34(
                         "div",
                         {
-                          className: classnames23(
-                            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
-                          ),
+                          className: classnames23(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,
-                            fontSize: `${headerFontSize}px`
-                          },
-                          children: innerCell(header)
-                        },
-                        `${headerGroup.id}-${header.id}`
-                      );
-                    }
-                    return null;
-                  }),
-                  !!rowButtons && /* @__PURE__ */ jsx34(
-                    "div",
-                    {
-                      className: classnames23(virtualTable_default.th, hgi === 0 ? virtualTable_default.firstThRow : void 0),
-                      style: {
-                        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(
-              "div",
-              {
-                "data-index": virtualRow.index,
-                ref: dynamicRowHeight ? rowVirtualizer.measureElement : void 0,
-                className: classnames23(
-                  virtualTable_default.tr,
-                  virtualRow.index % 2 !== 0 && virtualTable_default.evenRow,
-                  row.original?.isNew?.value === 1 && virtualTable_default.selected
-                ),
-                style: {
-                  ...!dynamicRowHeight && {
-                    height: virtualRow.size
-                  },
-                  transform: `translateY(${summaryHeaderHeight + virtualRow.start - rowVirtualizer.options.scrollMargin}px)`
-                },
-                children: [
-                  /* @__PURE__ */ jsx34("div", { style: { width: `${before}px` } }),
-                  virtualColumns.map((virtualCol) => {
-                    const cell = row.getAllCells()[virtualCol.index];
-                    const isSticky = cell.column.getIsPinned() === "left";
-                    return /* @__PURE__ */ jsx34(
-                      "div",
-                      {
-                        "data-col-index": virtualCol.index,
-                        className: classnames23(virtualTable_default.td, isSticky && virtualTable_default.sticky),
-                        style: {
-                          ...isSticky && {
-                            left: virtualCol.start,
-                            marginLeft: -1
-                            // чтобы появился левый бордер
-                          },
-                          width: `${virtualCol.size}px`,
-                          ...!dynamicRowHeight && {
-                            overflow: "hidden"
-                          },
-                          fontSize: `${rowFontSize}px`
-                        },
-                        "data-index": virtualRow.index,
-                        children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                      },
-                      `cell-${virtualRow.key}-${virtualCol.key}`
-                    );
-                  }),
-                  !!rowButtons && /* @__PURE__ */ jsx34(
-                    "div",
-                    {
-                      className: classnames23(virtualTable_default.td),
-                      style: {
-                        width: `${rowActionWidth}px`,
-                        justifyContent: "flex-start",
-                        padding: "4px",
-                        ...!dynamicRowHeight && {
-                          overflow: "hidden"
+                            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(
+                  "div",
+                  {
+                    "data-index": virtualRow.index,
+                    ref: dynamicRowHeight ? rowVirtualizer.measureElement : void 0,
+                    className: classnames23(
+                      virtualTable_default.tr,
+                      virtualRow.index % 2 !== 0 && virtualTable_default.evenRow,
+                      row.original?.isNew?.value === 1 && virtualTable_default.selected
+                    ),
+                    style: {
+                      ...!dynamicRowHeight && {
+                        height: virtualRow.size
                       },
-                      children: rowButtons?.(row.original)?.map((ab) => /* @__PURE__ */ jsx34(Fragment7, { children: ab.template ? ab.template(ab) : /* @__PURE__ */ jsx34(
-                        Tooltip,
+                      transform: `translateY(${summaryHeaderHeight + virtualRow.start - rowVirtualizer.options.scrollMargin}px)`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx34("div", { style: { width: `${before}px` } }),
+                      virtualColumns.map((virtualCol) => {
+                        const cell = row.getAllCells()[virtualCol.index];
+                        const isSticky = cell.column.getIsPinned() === "left";
+                        return /* @__PURE__ */ jsx34(
+                          "div",
+                          {
+                            "data-col-index": virtualCol.index,
+                            className: classnames23(virtualTable_default.td, isSticky && virtualTable_default.sticky),
+                            style: {
+                              ...isSticky && {
+                                left: virtualCol.start,
+                                marginLeft: -1
+                                // чтобы появился левый бордер
+                              },
+                              width: `${virtualCol.size}px`,
+                              ...!dynamicRowHeight && {
+                                overflow: "hidden"
+                              }
+                            },
+                            "data-index": virtualRow.index,
+                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                          },
+                          `cell-${virtualRow.key}-${virtualCol.key}`
+                        );
+                      }),
+                      !!rowButtons && /* @__PURE__ */ jsx34(
+                        "div",
                         {
-                          label: ab.title,
-                          placement: "top",
-                          wrapTrigger: true,
-                          classes: { trigger: virtualTable_default.rowButtonTrigger },
-                          children: /* @__PURE__ */ jsx34(
-                            Button,
+                          className: classnames23(virtualTable_default.td),
+                          style: {
+                            width: `${rowActionWidth}px`,
+                            justifyContent: "flex-start",
+                            padding: "4px",
+                            ...!dynamicRowHeight && {
+                              overflow: "hidden"
+                            }
+                          },
+                          children: rowButtons?.(row.original)?.map((ab) => /* @__PURE__ */ jsx34(Fragment7, { children: ab.template ? ab.template(ab) : /* @__PURE__ */ jsx34(
+                            Tooltip,
                             {
-                              onClick: () => ab.onClick?.(virtualRow.index, row.original),
-                              size: "small",
-                              variant: "text",
-                              icon: ab.icon
+                              label: ab.title,
+                              placement: "top",
+                              wrapTrigger: true,
+                              classes: { trigger: virtualTable_default.rowButtonTrigger },
+                              children: /* @__PURE__ */ jsx34(
+                                Button,
+                                {
+                                  onClick: () => ab.onClick?.(virtualRow.index, row.original),
+                                  size: "small",
+                                  variant: "text",
+                                  icon: ab.icon
+                                }
+                              )
                             }
-                          )
+                          ) }, ab.title))
                         }
-                      ) }, ab.title))
-                    }
-                  ),
-                  /* @__PURE__ */ jsx34("div", { style: { width: `${after}px` } })
-                ]
-              },
-              `row-${virtualRow.key}`
-            );
-          })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx34("div", { className: virtualTable_default.rightBorder, style: { height: `${rowsTotalSize + summaryHeaderHeight}px` } }),
-    /* @__PURE__ */ jsx34("div", { className: virtualTable_default.bottomBorder, style: { width: `${columnsTotalSize}px` } })
-  ] }) });
+                      ),
+                      /* @__PURE__ */ jsx34("div", { style: { width: `${after}px` } })
+                    ]
+                  },
+                  `row-${virtualRow.key}`
+                );
+              })
+            ]
+          }
+        ),
+        borders !== "none" && /* @__PURE__ */ jsxs19(Fragment8, { children: [
+          /* @__PURE__ */ jsx34("div", { className: virtualTable_default.rightBorder, style: { height: `${rowsTotalSize + summaryHeaderHeight}px` } }),
+          /* @__PURE__ */ jsx34("div", { className: virtualTable_default.bottomBorder, style: { width: `${columnsTotalSize}px` } })
+        ] })
+      ] })
+    }
+  );
 }
 
 // src/components/view/TreeView/TreeView.tsx
@@ -3058,7 +3089,7 @@ var getFilteredTree = (tree, search) => {
 };
 
 // src/components/view/TreeView/TreeView.tsx
-import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var TreeView_default = memo2(function TreeView({ data, selected, startIcons, onSelect, withSearch = false }) {
   const [searchValue, setSearchValue] = useState16("");
   const onChangeSearchValue = useCallback8((e) => setSearchValue(e.target.value), []);
@@ -3075,7 +3106,7 @@ var TreeView_default = memo2(function TreeView({ data, selected, startIcons, onS
   const filteredData = useMemo8(() => {
     return getFilteredTree(data, searchValue);
   }, [data, searchValue]);
-  return /* @__PURE__ */ jsxs21(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs21(Fragment9, { children: [
     withSearch && /* @__PURE__ */ jsx36(
       SearchInput,
       {
@@ -3141,7 +3172,7 @@ function TypographyWithTooltip(props) {
 }
 
 // src/components/view/Pairs/Pairs.tsx
-import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 function Pairs(props) {
   const { pairs, column1Width = "50%", column2Width = "50%", showBorder, minRowHeight, classes } = props;
   return /* @__PURE__ */ jsx38("div", { className: classNames5(classes?.root), children: pairs.map((pair, i) => /* @__PURE__ */ jsx38(
@@ -3151,7 +3182,7 @@ function Pairs(props) {
       className: classNames5(classes?.rowContainer, {
         [pairs_default.rowContainerBorders]: showBorder
       }),
-      children: pair && /* @__PURE__ */ jsxs22(Fragment9, { children: [
+      children: pair && /* @__PURE__ */ jsxs22(Fragment10, { children: [
         /* @__PURE__ */ jsx38(
           "div",
           {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nntc-ui",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "React UI-kit for NNTC",
   "type": "module",
   "exports": {
@@ -94,4 +94,4 @@
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4"
   }
-}
+}