@qoretechnologies/reqore 0.35.0 → 0.35.2

package/src/components/Table/headerCell.tsx

@@ -13,11 +13,12 @@ import { TColumnsUpdater } from './header';
 
 export interface IReqoreTableHeaderCellProps
   extends Omit<IReqoreTableColumn, 'cell'>,
-    IReqoreButtonProps {
+    Omit<IReqoreButtonProps, 'maxWidth'> {
   onSortChange?: (sort: string) => void;
   sortData?: IReqoreTableSort;
   onColumnsUpdate?: TColumnsUpdater;
   onFilterChange?: (dataId: string, filter: string) => void;
+  actions?: IReqoreTableColumn['header']['actions'];
 }
 
 export interface IReqoreTableHeaderStyle {
@@ -43,9 +44,12 @@ export const StyledTableHeaderResize = styled.div`
 
 export const ReqoreTableHeaderCell = ({
   width,
+  maxWidth,
+  minWidth,
   resizedWidth,
   grow,
   align,
+  pin,
   onSortChange,
   dataId,
   sortable,
@@ -57,19 +61,17 @@ export const ReqoreTableHeaderCell = ({
   filterPlaceholder,
   filterable,
   hideable = true,
+  pinnable = true,
   filter,
+  size,
   onFilterChange,
+  actions,
   ...rest
 }: IReqoreTableHeaderCellProps) => {
   const items = useMemo(() => {
-    const _items: IReqoreDropdownItem[] = [];
+    let _items: IReqoreDropdownItem[] = [];
 
     if (resizable || hideable) {
-      _items.push({
-        divider: true,
-        label: 'Options',
-      });
-
       if (resizable) {
         _items.push({
           label: 'Reset size',
@@ -81,10 +83,37 @@ export const ReqoreTableHeaderCell = ({
         });
       }
 
+      if (pinnable) {
+        _items.push({ divider: true, size: 'small', line: true });
+
+        _items.push({
+          label: 'Pin left',
+          icon: 'SkipBackLine',
+          active: pin === 'left',
+          intent: pin === 'left' ? 'info' : undefined,
+          onClick: () => {
+            onColumnsUpdate?.(dataId, 'pin', pin !== 'left' ? 'left' : undefined);
+          },
+        });
+
+        _items.push({
+          label: 'Pin Right',
+          icon: 'SkipForwardLine',
+          active: pin === 'right',
+          intent: pin === 'right' ? 'info' : undefined,
+          onClick: () => {
+            onColumnsUpdate?.(dataId, 'pin', pin !== 'right' ? 'right' : undefined);
+          },
+        });
+      }
+
       if (hideable) {
+        _items.push({ divider: true, size: 'small', line: true });
+
         _items.push({
           label: 'Hide column',
           icon: 'EyeCloseLine',
+          className: 'reqore-table-header-hide',
           onClick: () => {
             onColumnsUpdate?.(dataId, 'show', false);
           },
@@ -92,12 +121,17 @@ export const ReqoreTableHeaderCell = ({
       }
     }
 
+    if (actions) {
+      _items = [..._items, { divider: true, label: 'Other' }, ...actions];
+    }
+
     return _items;
   }, [resizable, hideable, width, resizedWidth, onColumnsUpdate, dataId]);
 
   return (
     <Resizable
-      minWidth={width}
+      minWidth={minWidth || width}
+      maxWidth={maxWidth}
       onResize={(_event, _direction, _component) => {
         onColumnsUpdate?.(dataId, 'resizedWidth', parseInt(_component.style.width));
       }}
@@ -119,6 +153,7 @@ export const ReqoreTableHeaderCell = ({
       <ReqoreControlGroup fluid stack rounded={false} fill style={{ height: '100%' }}>
         <ReqoreButton
           {...rest}
+          size={size}
           readOnly={!sortable && !onClick}
           className={`${className || ''} reqore-table-header-cell`}
           rounded={false}
@@ -143,8 +178,9 @@ export const ReqoreTableHeaderCell = ({
             icon='MoreLine'
             className='reqore-table-header-cell-options'
             fixed
+            size={size}
             rounded={false}
-            intent={filter ? 'info' : undefined}
+            intent={filter ? 'info' : rest.intent}
             filterable={filterable}
             filterPlaceholder={filterPlaceholder || 'Filter by this column...'}
             filter={filter}

package/src/components/Table/helpers.ts

@@ -1,7 +1,7 @@
 import { size } from 'lodash';
 import { firstBy } from 'thenby';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
-import { ICON_FROM_SIZE, SIZE_TO_PX, TSizes } from '../../constants/sizes';
+import { ICON_FROM_SIZE, SIZE_TO_MODIFIER, SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreIconName } from '../../types/icons';
 import { IReqorePanelAction } from '../Panel';
 
@@ -137,6 +137,12 @@ export const getColumnsCount = (columns: IReqoreTableColumn[]): number => {
   return count;
 };
 
+export const hasGroupedColumns = (columns: IReqoreTableColumn[]): boolean => {
+  return columns.some((column) => {
+    return !!column.header?.columns;
+  });
+};
+
 export const hasHiddenColumns = (columns: IReqoreTableColumn[]): boolean => {
   return columns.some((column) => {
     if (column.header.columns) {
@@ -147,6 +153,40 @@ export const hasHiddenColumns = (columns: IReqoreTableColumn[]): boolean => {
   });
 };
 
+export const getColumnsByPinType = (
+  columns: IReqoreTableColumn[],
+  type: 'left' | 'right' | 'main'
+): IReqoreTableColumn[] => {
+  return columns.reduce((newColumns, column) => {
+    if (column.header.columns) {
+      const subColumns: IReqoreTableColumn[] = getColumnsByPinType(column.header.columns, type);
+
+      if (!size(subColumns)) {
+        return newColumns;
+      }
+
+      const columnsResult = [
+        ...newColumns,
+        {
+          ...column,
+          header: {
+            ...column.header,
+            columns: subColumns,
+          },
+        },
+      ];
+
+      return columnsResult;
+    }
+
+    if ((type === 'main' && !column.pin) || column.pin === type) {
+      return [...newColumns, column];
+    }
+
+    return newColumns;
+  }, []);
+};
+
 export const getOnlyShownColumns = (columns: IReqoreTableColumn[]): IReqoreTableColumn[] => {
   return columns.reduce((newColumns, column) => {
     if (column.header.columns) {
@@ -175,6 +215,7 @@ export const getOnlyShownColumns = (columns: IReqoreTableColumn[]): IReqoreTable
 
 export const prepareColumns = (
   columns: IReqoreTableColumn[],
+  columnModifiers: { [key: string]: { [key: string]: any } },
   size: TSizes = 'normal'
 ): IReqoreTableColumn[] => {
   // We need to set the width of each column
@@ -182,7 +223,10 @@ export const prepareColumns = (
     if (column.header.columns) {
       return {
         ...column,
-        header: { ...column.header, columns: prepareColumns(column.header.columns) },
+        header: {
+          ...column.header,
+          columns: prepareColumns(column.header.columns, columnModifiers, size),
+        },
       };
     }
 
@@ -198,7 +242,8 @@ export const prepareColumns = (
 
     return {
       ...column,
-      width: newWidth,
+      width: newWidth * SIZE_TO_MODIFIER[size],
+      ...(columnModifiers?.[column.dataId] || {}),
     };
   });
 };