@qoretechnologies/reqore 0.36.5 → 0.36.7

package/src/components/Table/headerCell.tsx

@@ -1,7 +1,7 @@
 /* @flow */
 import { rgba } from 'polished';
 import { Resizable } from 're-resizable';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import styled from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
 import { ReqoreButton, ReqoreControlGroup, ReqoreDropdown } from '../..';
@@ -13,12 +13,12 @@ import { TColumnsUpdater } from './header';
 
 export interface IReqoreTableHeaderCellProps
   extends Omit<IReqoreTableColumn, 'cell'>,
-    Omit<IReqoreButtonProps, 'maxWidth'> {
+    Pick<IReqoreTableColumn['header'], 'content' | 'actions'>,
+    Omit<IReqoreButtonProps, 'maxWidth' | 'content'> {
   onSortChange?: (sort: string) => void;
   sortData?: IReqoreTableSort;
   onColumnsUpdate?: TColumnsUpdater;
   onFilterChange?: (dataId: string, filter: string) => void;
-  actions?: IReqoreTableColumn['header']['actions'];
 }
 
 export interface IReqoreTableHeaderStyle {
@@ -42,155 +42,162 @@ export const StyledTableHeaderResize = styled.div`
   }
 `;
 
-export const ReqoreTableHeaderCell = ({
-  width,
-  maxWidth,
-  minWidth,
-  resizedWidth,
-  grow,
-  align,
-  pin,
-  onSortChange,
-  dataId,
-  sortable,
-  sortData,
-  className,
-  onClick,
-  onColumnsUpdate,
-  resizable = true,
-  filterPlaceholder,
-  filterable,
-  hideable = true,
-  pinnable = true,
-  filter,
-  size,
-  onFilterChange,
-  actions,
-  ...rest
-}: IReqoreTableHeaderCellProps) => {
-  const items = useMemo(() => {
-    let _items: IReqoreDropdownItem[] = [];
+export const ReqoreTableHeaderCell = memo(
+  ({
+    width,
+    maxWidth,
+    minWidth,
+    resizedWidth,
+    grow,
+    align,
+    pin,
+    onSortChange,
+    dataId,
+    sortable,
+    sortData,
+    className,
+    onClick,
+    onColumnsUpdate,
+    resizable = true,
+    filterPlaceholder,
+    filterable,
+    hideable = true,
+    pinnable = true,
+    filter,
+    content,
+    size,
+    onFilterChange,
+    actions,
+    ...rest
+  }: IReqoreTableHeaderCellProps) => {
+    const items = useMemo(() => {
+      let _items: IReqoreDropdownItem[] = [];
 
-    if (resizable || hideable) {
-      if (resizable) {
-        _items.push({
-          label: 'Reset size',
-          icon: 'HistoryLine',
-          disabled: !resizedWidth || width === resizedWidth,
-          onClick: () => {
-            onColumnsUpdate?.(dataId, 'resizedWidth', width);
-          },
-        });
-      }
+      if (resizable || hideable) {
+        if (resizable) {
+          _items.push({
+            label: 'Reset size',
+            icon: 'HistoryLine',
+            disabled: !resizedWidth || width === resizedWidth,
+            onClick: () => {
+              onColumnsUpdate?.(dataId, 'resizedWidth', width);
+            },
+          });
+        }
 
-      if (pinnable) {
-        _items.push({ divider: true, size: 'small', line: true });
+        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 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);
-          },
-        });
-      }
+          _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 });
+        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);
-          },
-        });
+          _items.push({
+            label: 'Hide column',
+            icon: 'EyeCloseLine',
+            className: 'reqore-table-header-hide',
+            onClick: () => {
+              onColumnsUpdate?.(dataId, 'show', false);
+            },
+          });
+        }
       }
-    }
 
-    if (actions) {
-      _items = [..._items, { divider: true, label: 'Other' }, ...actions];
-    }
+      if (actions) {
+        _items = [..._items, { divider: true, label: 'Other' }, ...actions];
+      }
 
-    return _items;
-  }, [resizable, hideable, width, resizedWidth, onColumnsUpdate, dataId]);
+      return _items;
+    }, [resizable, hideable, width, resizedWidth, onColumnsUpdate, dataId]);
 
-  return (
-    <Resizable
-      minWidth={minWidth || width}
-      maxWidth={maxWidth}
-      onResize={(_event, _direction, _component) => {
-        onColumnsUpdate?.(dataId, 'resizedWidth', parseInt(_component.style.width));
-      }}
-      handleComponent={{
-        right: <StyledTableHeaderResize />,
-      }}
-      style={{
-        overflow: 'hidden',
-        flexGrow: grow,
-      }}
-      size={{
-        width: resizedWidth || width,
-        height: undefined,
-      }}
-      enable={{
-        right: resizable,
-      }}
-    >
-      <ReqoreControlGroup fluid stack rounded={false} fill style={{ height: '100%' }}>
-        <ReqoreButton
-          {...rest}
-          size={size}
-          readOnly={!sortable && !onClick}
-          className={`${className || ''} reqore-table-header-cell`}
-          rounded={false}
-          textAlign={align}
-          rightIcon={
-            sortable && sortData.by === dataId
-              ? (`Arrow${sortData.direction === 'desc' ? 'Down' : 'Up'}Fill` as
-                  | 'ArrowDownFill'
-                  | 'ArrowUpFill')
-              : rest.rightIcon
-          }
-          onClick={(e) => {
-            if (sortable) {
-              onSortChange?.(dataId);
-            }
+    return (
+      <Resizable
+        minWidth={minWidth || width}
+        maxWidth={maxWidth}
+        onResize={(_event, _direction, _component) => {
+          onColumnsUpdate?.(dataId, 'resizedWidth', parseInt(_component.style.width));
+        }}
+        handleComponent={{
+          right: <StyledTableHeaderResize />,
+        }}
+        style={{
+          overflow: 'hidden',
+          flexGrow: grow,
+        }}
+        size={{
+          width: resizedWidth || width,
+          height: undefined,
+        }}
+        enable={{
+          right: resizable,
+        }}
+      >
+        <ReqoreControlGroup fluid stack rounded={false} fill style={{ height: '100%' }}>
+          {content ? (
+            content
+          ) : (
+            <ReqoreButton
+              {...rest}
+              size={size}
+              readOnly={!sortable && !onClick}
+              className={`${className || ''} reqore-table-header-cell`}
+              rounded={false}
+              textAlign={align}
+              rightIcon={
+                sortable && sortData.by === dataId
+                  ? (`Arrow${sortData.direction === 'desc' ? 'Down' : 'Up'}Fill` as
+                      | 'ArrowDownFill'
+                      | 'ArrowUpFill')
+                  : rest.rightIcon
+              }
+              onClick={(e) => {
+                if (sortable) {
+                  onSortChange?.(dataId);
+                }
 
-            onClick?.(e);
-          }}
-        />
-        {filterable || hideable || resizable ? (
-          <ReqoreDropdown<IReqoreButtonProps>
-            icon='MoreLine'
-            className='reqore-table-header-cell-options'
-            fixed
-            size={size}
-            rounded={false}
-            intent={filter ? 'info' : rest.intent}
-            filterable={filterable}
-            filterPlaceholder={filterPlaceholder || 'Filter by this column...'}
-            filter={filter}
-            onFilterChange={(value) => {
-              onFilterChange?.(dataId, value);
-            }}
-            items={items}
-          />
-        ) : null}
-      </ReqoreControlGroup>
-    </Resizable>
-  );
-};
+                onClick?.(e);
+              }}
+            />
+          )}
+          {filterable || hideable || resizable ? (
+            <ReqoreDropdown<IReqoreButtonProps>
+              icon='MoreLine'
+              className='reqore-table-header-cell-options'
+              fixed
+              size={size}
+              rounded={false}
+              intent={filter ? 'info' : rest.intent}
+              filterable={filterable}
+              filterPlaceholder={filterPlaceholder || 'Filter by this column...'}
+              filter={filter}
+              onFilterChange={(value) => {
+                onFilterChange?.(dataId, value);
+              }}
+              items={items}
+            />
+          ) : null}
+        </ReqoreControlGroup>
+      </Resizable>
+    );
+  }
+);

package/src/components/Table/index.tsx

@@ -59,7 +59,7 @@ export type TReqoreTableColumnContent =
 export interface IReqoreTableColumn extends IReqoreIntent {
   dataId: string;
   show?: boolean;
-  grow?: 1 | 2 | 3 | 4;
+  grow?: 0 | 1 | 2 | 3 | 4;
   width?: number;
   minWidth?: number;
   maxWidth?: number;
@@ -79,8 +79,10 @@ export interface IReqoreTableColumn extends IReqoreIntent {
   header?: {
     columns?: IReqoreTableColumn[];
     component?: React.FC<IReqoreTableHeaderCellProps>;
+    // Content is the same as react children
+    content?: React.ReactNode;
     actions?: IReqoreDropdownItem[];
-  } & Omit<IReqoreButtonProps, 'maxWidth'>;
+  } & Omit<IReqoreButtonProps, 'maxWidth' | 'content'>;
 
   cell?: {
     onClick?: (cellValue: any) => void;