@snack-uikit/table 0.33.3 → 0.34.0

package/src/components/Table/utils.ts

@@ -1,5 +1,9 @@
+import { BaseItemProps, GroupSelectItemProps } from '@snack-uikit/list';
+import { useLocale } from '@snack-uikit/locale';
 import { isBrowser } from '@snack-uikit/utils';
 
+import { ColumnDefinition, FilterableColumnDefinition } from '../../types';
+
 export function getCurrentlyConfiguredHeaderWidth(id: string): number {
   if (isBrowser()) {
     const cell = document.querySelector<HTMLDivElement>(`[data-header-id="${id}"]`);
@@ -63,3 +67,117 @@ export function saveStateToLocalStorage({ id, columnId, size }: SaveStateToLocal
 
   localStorage.setItem(id, JSON.stringify({ ...(savedStateFromStorage || {}), resizeState: newResizeState }));
 }
+
+export function isFilterableColumn<TData extends object>(
+  colDef: ColumnDefinition<TData>,
+): colDef is FilterableColumnDefinition<TData> {
+  return 'id' in colDef && 'headerConfigLabel' in colDef;
+}
+
+export function prepareColumnsSettingsMap<TData extends object>(
+  columnDefinitions: ColumnDefinition<TData>[],
+): string[] {
+  return columnDefinitions.filter(isFilterableColumn).map(colDef => colDef.id);
+}
+
+const sortColumnDefinitions = (columnOrder: string[]) =>
+  function sortColDefs<TData extends object>(
+    colDefA: FilterableColumnDefinition<TData>,
+    colDefB: FilterableColumnDefinition<TData>,
+  ) {
+    const indexItemA = columnOrder.findIndex(columnIndex => columnIndex === colDefA.id);
+    const indexItemB = columnOrder.findIndex(columnIndex => columnIndex === colDefB.id);
+
+    return indexItemA - indexItemB;
+  };
+
+function createColumnsSettingsOption<TData extends object>(
+  columnDefinition: FilterableColumnDefinition<TData>,
+): BaseItemProps {
+  return {
+    id: columnDefinition.id,
+    content: {
+      option: columnDefinition.headerConfigLabel as string,
+    },
+    switch: true,
+    showSwitchIcon: true,
+  };
+}
+
+type ColumnGroups = {
+  pinTop: BaseItemProps[];
+  unpinned: BaseItemProps[];
+  pinBottom: BaseItemProps[];
+};
+
+type PrepareColumnsSettingsProps<TData extends object> = {
+  columnDefinitions: ColumnDefinition<TData>[];
+  columnOrder: string[];
+  areAllColumnsEnabled: boolean;
+  columnsSettingsHeader?: string;
+  t: ReturnType<typeof useLocale<'Table'>>['t'];
+};
+
+export function prepareColumnsSettings<TData extends object>({
+  columnDefinitions,
+  columnOrder,
+  columnsSettingsHeader,
+  areAllColumnsEnabled,
+  t,
+}: PrepareColumnsSettingsProps<TData>): [GroupSelectItemProps] {
+  const groupedItems = columnDefinitions
+    .filter(isFilterableColumn)
+    .sort(sortColumnDefinitions(columnOrder))
+    .reduce(
+      (accSettings: ColumnGroups, colDef: FilterableColumnDefinition<TData>) => {
+        const item = createColumnsSettingsOption(colDef);
+
+        switch (colDef.pinned) {
+          case 'left':
+            accSettings.pinTop.push(item);
+            break;
+
+          case 'right':
+            accSettings.pinBottom.push(item);
+            break;
+
+          default:
+            accSettings.unpinned.push(item);
+        }
+
+        return accSettings;
+      },
+      {
+        pinTop: [],
+        unpinned: [],
+        pinBottom: [],
+      },
+    );
+
+  return [
+    {
+      divider: false,
+      items: [
+        {
+          divider: false,
+          items: groupedItems.pinTop,
+          type: 'group',
+        },
+        {
+          divider: true,
+          items: groupedItems.unpinned,
+          type: 'group',
+        },
+        {
+          divider: true,
+          items: groupedItems.pinBottom,
+          type: 'group',
+        },
+      ],
+      selectButtonLabel: areAllColumnsEnabled ? t('groupSelectButton.hide') : t('groupSelectButton.show'),
+      label: columnsSettingsHeader || 'Display settings',
+      mode: 'primary',
+      type: 'group-select',
+    },
+  ];
+}

package/src/components/types.ts

@@ -8,8 +8,8 @@ import {
 } from '@tanstack/react-table';
 import { ReactNode, RefObject } from 'react';
 
-import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
-import { ToolbarProps } from '@snack-uikit/toolbar';
+import { FiltersState } from '@snack-uikit/chips';
+import { FilterRow, ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
 
 import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
@@ -42,6 +42,16 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
     onChange?(state: SortingState): void;
   };
 
+  /** Параметры отвечают за настройки колонок <br>
+   *  <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br>
+   *  <strong>headerLabel</strong>: Название меню настроек колонок. Наличие включает показ настроек <br>
+   *  <strong>selectAllButtonLabels</strong>: Значения кнопки включения/отключения всех айтемов ([вкл, выкл]) <br>
+   *  */
+  columnsSettings?: {
+    enableDrag?: boolean;
+    headerLabel?: string;
+  };
+
   /** Параметр отвечает за общие настройки раскрывающихся строк*/
   expanding?: {
     /** Метод отвечает за получение дочерних строк*/
@@ -101,7 +111,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
   outline?: boolean;
 
   /** Фильтры */
-  columnFilters?: ChipChoiceRowProps<TFilters>;
+  columnFilters?: FilterRow<TFilters>;
 
   /** Флаг, показывающий что данные были отфильтрованы при пустых данных */
   dataFiltered?: boolean;

package/src/constants.tsx

@@ -42,3 +42,4 @@ export const DEFAULT_PAGE_SIZE = 10;
 export const DEFAULT_SORTING = [];
 export const DEFAULT_FILTER_VISIBILITY = [];
 export const DEFAULT_ROW_SELECTION = {};
+export const DEFAULT_COLUMNS = ['snack_predefined_statusColumn', 'selectionCell', 'rowActions'];

package/src/helperComponents/Cells/BodyCell/BodyCell.tsx

@@ -1,3 +1,4 @@
+import { useSortable } from '@dnd-kit/sortable';
 import { Cell as TableCell, flexRender } from '@tanstack/react-table';
 import cn from 'classnames';
 
@@ -10,16 +11,22 @@ import styles from './styles.module.scss';
 type BodyCellProps<TData> = Omit<CellProps, 'style' | 'children'> & {
   cell: TableCell<TData, unknown>;
   rowAutoHeight?: boolean;
+  isDraggable?: boolean;
 };
 
-export function BodyCell<TData>({ cell, className, rowAutoHeight, ...props }: BodyCellProps<TData>) {
+export function BodyCell<TData>({ cell, className, rowAutoHeight, isDraggable, ...props }: BodyCellProps<TData>) {
   const columnDef: ColumnDefinition<TData> = cell.column.columnDef;
 
-  const style = useCellSizes(cell);
+  const style = useCellSizes(cell, { isDraggable });
+
+  const { setNodeRef } = useSortable({
+    id: cell.column.id,
+  });
 
   return (
     <Cell
       {...props}
+      ref={setNodeRef}
       style={style}
       className={cn(styles.tableBodyCell, className, columnDef.cellClassName)}
       data-row-auto-height={rowAutoHeight || undefined}

package/src/helperComponents/Cells/HeaderCell/HeaderCell.tsx

@@ -1,10 +1,11 @@
+import { useSortable } from '@dnd-kit/sortable';
 import { flexRender, Header } from '@tanstack/react-table';
 import cn from 'classnames';
 import { MouseEvent, useRef } from 'react';
 
 import { TruncateString } from '@snack-uikit/truncate-string';
 
-import { TEST_IDS } from '../../../constants';
+import { DEFAULT_COLUMNS, TEST_IDS } from '../../../constants';
 import { ColumnDefinition, ColumnPinPosition } from '../../../types';
 import { useCellSizes } from '../../hooks';
 import { Cell, CellProps } from '../Cell';
@@ -16,9 +17,16 @@ type HeaderCellProps<TData> = Omit<CellProps, 'align' | 'children' | 'onClick' |
   header: Header<TData, unknown>;
   pinPosition?: ColumnPinPosition;
   rowAutoHeight?: boolean;
+  isDraggable?: boolean;
 };
 
-export function HeaderCell<TData>({ header, pinPosition, className, rowAutoHeight }: HeaderCellProps<TData>) {
+export function HeaderCell<TData>({
+  header,
+  pinPosition,
+  className,
+  rowAutoHeight,
+  isDraggable,
+}: HeaderCellProps<TData>) {
   const cellRef = useRef<HTMLDivElement>(null);
   const isSortable = header.column.getCanSort();
   const isResizable = header.column.getCanResize();
@@ -32,7 +40,11 @@ export function HeaderCell<TData>({ header, pinPosition, className, rowAutoHeigh
 
   const columnDef: ColumnDefinition<TData> = header.column.columnDef;
 
-  const style = useCellSizes(header);
+  const style = useCellSizes(header, { isDraggable });
+
+  const { attributes, listeners, setNodeRef, isDragging } = useSortable({
+    id: header.column.id,
+  });
 
   const sortingHandler = (e: MouseEvent<HTMLDivElement>) => {
     if (isSomeColumnResizing) return;
@@ -40,11 +52,16 @@ export function HeaderCell<TData>({ header, pinPosition, className, rowAutoHeigh
     return header.column.getToggleSortingHandler()?.(e);
   };
 
+  const isAvailableForDrag = !DEFAULT_COLUMNS.includes(header.column.id);
+  const dragAttributes = isAvailableForDrag ? attributes : {};
+  const listenersAttributes = isAvailableForDrag ? listeners : {};
+
   return (
     <Cell
       style={style}
       onClick={sortingHandler}
       data-sortable={isSortable || undefined}
+      data-draggable={isDraggable || undefined}
       data-no-padding={columnDef.noHeaderCellPadding || undefined}
       data-no-offset={columnDef.noHeaderCellBorderOffset || undefined}
       data-test-id={TEST_IDS.headerCell}
@@ -55,28 +72,38 @@ export function HeaderCell<TData>({ header, pinPosition, className, rowAutoHeigh
       data-row-auto-height={rowAutoHeight || undefined}
       role='columnheader'
       className={cn(styles.tableHeaderCell, className, columnDef.headerClassName)}
-      ref={cellRef}
+      ref={element => {
+        setNodeRef(element);
+        return cellRef;
+      }}
     >
-      <div className={styles.tableHeaderCellMain}>
-        {columnDef.header && (
-          <div className={styles.tableHeaderCellName}>
-            {rowAutoHeight ? (
-              flexRender(columnDef.header, header.getContext())
-            ) : (
-              <TruncateString text={flexRender(columnDef.header, header.getContext()) as string} />
-            )}
-          </div>
-        )}
+      <div
+        className={styles.tableHeaderCellDragWrapper}
+        data-dragging={isDragging || undefined}
+        {...dragAttributes}
+        {...listenersAttributes}
+      >
+        <div className={styles.tableHeaderCellMain}>
+          {columnDef.header && (
+            <div className={styles.tableHeaderCellName}>
+              {rowAutoHeight ? (
+                flexRender(columnDef.header, header.getContext())
+              ) : (
+                <TruncateString text={flexRender(columnDef.header, header.getContext()) as string} />
+              )}
+            </div>
+          )}
 
-        {Boolean(sortIcon) && (
-          <div
-            className={styles.tableHeaderIcon}
-            data-sort-direction={sortDirection}
-            data-test-id={TEST_IDS.headerSortIndicator}
-          >
-            {sortIcon}
-          </div>
-        )}
+          {Boolean(sortIcon) && (
+            <div
+              className={styles.tableHeaderIcon}
+              data-sort-direction={sortDirection}
+              data-test-id={TEST_IDS.headerSortIndicator}
+            >
+              {sortIcon}
+            </div>
+          )}
+        </div>
       </div>
 
       {Boolean(isResizable) && <ResizeHandle header={header} cellRef={cellRef} />}

package/src/helperComponents/Cells/HeaderCell/styles.module.scss

@@ -98,6 +98,10 @@
     }
   }
 
+  &[data-draggable] {
+    cursor: grab;
+  }
+
   &[data-sortable] {
     cursor: pointer;
   }
@@ -151,6 +155,16 @@
   }
 }
 
+.tableHeaderCellDragWrapper {
+  width: 100%;
+
+  &[data-dragging] {
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+
 .tableHeaderCellMain {
   overflow: auto;
   display: flex;
@@ -182,3 +196,4 @@
     height: styles-tokens-table.simple-var(styles-tokens-element.$icon-xs) !important; /* stylelint-disable-line declaration-no-important */
   }
 }
+

package/src/helperComponents/ColumnsSettings/ColumnsSettings.tsx

@@ -0,0 +1,28 @@
+import { ButtonFunction } from '@snack-uikit/button';
+import { FunctionSettingsSVG } from '@snack-uikit/icons';
+import { Droplist, GroupSelectItemProps } from '@snack-uikit/list';
+
+import styles from './styles.module.scss';
+
+type ColumnsSettingsProps = {
+  enabledColumns: string[];
+  setEnabledColumns(enabledColumns: string[]): void;
+  columnsSettings: [GroupSelectItemProps];
+};
+
+export function ColumnsSettings({ columnsSettings, enabledColumns, setEnabledColumns }: ColumnsSettingsProps) {
+  return (
+    <Droplist
+      className={styles.columnsSettings}
+      items={columnsSettings}
+      selection={{
+        value: enabledColumns,
+        onChange: setEnabledColumns,
+        mode: 'multiple',
+      }}
+      placement='bottom-end'
+    >
+      <ButtonFunction size='m' data-test-id='table__column-settings' icon={<FunctionSettingsSVG />} />
+    </Droplist>
+  );
+}

package/src/helperComponents/ColumnsSettings/index.ts

@@ -0,0 +1 @@
+export * from './ColumnsSettings';

package/src/helperComponents/ColumnsSettings/styles.module.scss

@@ -0,0 +1,5 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table' as table;
+
+.columnsSettings {
+  min-width: 256px;
+}

package/src/helperComponents/Rows/BodyRow.tsx

@@ -1,7 +1,9 @@
+import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
 import { Row as TableRow } from '@tanstack/react-table';
 import { MouseEvent, useState } from 'react';
 
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
+import { ColumnOrder } from '../../types';
 import { BodyCell } from '../Cells';
 import { RowContext } from '../contexts';
 import { useRowCells } from '../hooks';
@@ -21,10 +23,18 @@ export type RowClickHandler<TData> = (e: MouseEvent<HTMLDivElement>, row: RowInf
 export type BodyRowProps<TData> = Pick<RowProps, 'rowAutoHeight'> & {
   row: TableRow<TData>;
   onRowClick?: RowClickHandler<TData>;
+  columnOrder: ColumnOrder;
+  enableColumnsOrderSortByDrag?: boolean;
 };
 
-export function BodyRow<TData>({ row, onRowClick, rowAutoHeight }: BodyRowProps<TData>) {
-  const { pinnedLeft, pinnedRight, unpinned } = useRowCells(row);
+export function BodyRow<TData>({
+  row,
+  onRowClick,
+  rowAutoHeight,
+  columnOrder,
+  enableColumnsOrderSortByDrag,
+}: BodyRowProps<TData>) {
+  const { leftPinned, rightPinned, unpinned } = useRowCells(row);
 
   const [dropListOpened, setDropListOpen] = useState(false);
 
@@ -58,22 +68,34 @@ export function BodyRow<TData>({ row, onRowClick, rowAutoHeight }: BodyRowProps<
         className={styles.bodyRow}
         rowAutoHeight={rowAutoHeight}
       >
-        {pinnedLeft && (
+        {leftPinned && (
           <PinnedCells position={COLUMN_PIN_POSITION.Left}>
-            {pinnedLeft.map(cell => (
+            {leftPinned.map(cell => (
               <BodyCell key={cell.id} cell={cell} rowAutoHeight={rowAutoHeight} />
             ))}
           </PinnedCells>
         )}
 
         {unpinned.map(cell => (
-          <BodyCell key={cell.id} cell={cell} rowAutoHeight={rowAutoHeight} />
+          <SortableContext key={cell.id} items={columnOrder} strategy={horizontalListSortingStrategy}>
+            <BodyCell
+              key={cell.id}
+              cell={cell}
+              rowAutoHeight={rowAutoHeight}
+              isDraggable={enableColumnsOrderSortByDrag}
+            />
+          </SortableContext>
         ))}
 
-        {pinnedRight && (
+        {rightPinned && (
           <PinnedCells position={COLUMN_PIN_POSITION.Right}>
-            {pinnedRight.map(cell => (
-              <BodyCell key={cell.id} cell={cell} rowAutoHeight={rowAutoHeight} />
+            {rightPinned.map(cell => (
+              <BodyCell
+                key={cell.id}
+                cell={cell}
+                rowAutoHeight={rowAutoHeight}
+                isDraggable={enableColumnsOrderSortByDrag}
+              />
             ))}
           </PinnedCells>
         )}

package/src/helperComponents/Rows/HeaderRow.tsx

@@ -1,11 +1,19 @@
+import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
+
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
+import { ColumnOrder } from '../../types';
 import { HeaderCell } from '../Cells';
 import { useHeaderGroups } from '../hooks';
 import { PinnedCells } from './PinnedCells';
 import { Row, RowProps } from './Row';
 import styles from './styles.module.scss';
 
-export function HeaderRow({ rowAutoHeight }: Pick<RowProps, 'rowAutoHeight'>) {
+type Props = Pick<RowProps, 'rowAutoHeight'> & {
+  columnOrder: ColumnOrder;
+  enableColumnsOrderSortByDrag?: boolean;
+};
+
+export function HeaderRow({ rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag }: Props) {
   const { leftPinned, unpinned, rightPinned } = useHeaderGroups();
 
   return (
@@ -22,9 +30,18 @@ export function HeaderRow({ rowAutoHeight }: Pick<RowProps, 'rowAutoHeight'>) {
         </PinnedCells>
       )}
 
-      {unpinned.map(headerGroup =>
-        headerGroup.headers.map(header => <HeaderCell key={header.id} header={header} rowAutoHeight={rowAutoHeight} />),
-      )}
+      <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>
+        {unpinned.map(headerGroup =>
+          headerGroup.headers.map(header => (
+            <HeaderCell
+              key={header.id}
+              header={header}
+              rowAutoHeight={rowAutoHeight}
+              isDraggable={enableColumnsOrderSortByDrag && columnOrder.length > 1}
+            />
+          )),
+        )}
+      </SortableContext>
 
       {rightPinned && (
         <PinnedCells position={COLUMN_PIN_POSITION.Right}>

package/src/helperComponents/hooks.ts

@@ -1,5 +1,7 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { Cell, Header, HeaderGroup, Row } from '@tanstack/react-table';
-import { useMemo } from 'react';
+import { CSSProperties, useMemo } from 'react';
 
 import { useTableContext } from './contexts';
 
@@ -12,6 +14,7 @@ export function useHeaderGroups() {
 
   const columnDefs = table._getColumnDefs();
   const pinEnabled = table.getIsSomeColumnsPinned();
+  const { columnOrder } = table.getState();
 
   return useMemo(() => {
     if (!pinEnabled) {
@@ -30,7 +33,7 @@ export function useHeaderGroups() {
     };
     // need to rebuild if columnDefinitions has changed
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [table, pinEnabled, columnDefs]);
+  }, [table, pinEnabled, columnDefs, columnOrder]);
 }
 
 export function useRowCells<TData>(row: Row<TData>) {
@@ -38,6 +41,7 @@ export function useRowCells<TData>(row: Row<TData>) {
 
   const pinEnabled = table.getIsSomeColumnsPinned();
   const columnDefs = table._getColumnDefs();
+  const { columnOrder } = table.getState();
 
   return useMemo(() => {
     if (!pinEnabled) {
@@ -50,30 +54,56 @@ export function useRowCells<TData>(row: Row<TData>) {
     const right = row.getRightVisibleCells();
 
     return {
-      pinnedLeft: left.length ? left : undefined,
-      pinnedRight: right.length ? right : undefined,
+      leftPinned: left.length ? left : undefined,
+      rightPinned: right.length ? right : undefined,
       unpinned: row.getCenterVisibleCells(),
     };
     // need to rebuild if columnDefinitions has changed
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [row, pinEnabled, columnDefs]);
+  }, [row, pinEnabled, columnDefs, columnOrder]);
 }
 
-export function useCellSizes<TData>(element: Cell<TData, unknown> | Header<TData, unknown>) {
+type CellSizesOptions = {
+  isDraggable?: boolean;
+};
+
+export function useCellSizes<TData>(
+  element: Cell<TData, unknown> | Header<TData, unknown>,
+  options?: CellSizesOptions,
+) {
   const column = element.column;
 
+  const { isDragging, transform } = useSortable({
+    id: column.id,
+  });
+
   const minWidth = column.columnDef.minSize;
   const maxWidth = column.columnDef.maxSize;
   const width = `var(--table-column-${column.id}-size)`;
   const flexShrink = `var(--table-column-${column.id}-flex)`;
 
-  return useMemo(
-    () => ({
+  const isHeaderCell = 'headerGroup' in element;
+
+  return useMemo(() => {
+    const styles: CSSProperties = {
       minWidth,
       width,
       maxWidth,
       flexShrink,
-    }),
-    [flexShrink, maxWidth, minWidth, width],
-  );
+    };
+
+    if (options?.isDraggable) {
+      styles.opacity = isDragging ? 0.8 : 1;
+      styles.position = 'relative';
+      styles.transform = CSS.Translate.toString(transform);
+      styles.transition = 'width transform 0.2s ease-in-out';
+      styles.zIndex = isDragging ? 1 : undefined;
+
+      if (isHeaderCell) {
+        styles.whiteSpace = 'nowrap';
+      }
+    }
+
+    return styles;
+  }, [options?.isDraggable, flexShrink, isDragging, isHeaderCell, maxWidth, minWidth, transform, width]);
 }

package/src/helperComponents/index.ts

@@ -7,3 +7,4 @@ export * from './hooks';
 export * from './types';
 export * from './TableEmptyState';
 export * from './TablePagination';
+export * from './ColumnsSettings';

package/src/types.ts

@@ -14,8 +14,7 @@ import { ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf } from '@snack-uikit/utils';
 
 import { COLUMN_ALIGN, COLUMN_PIN_POSITION } from './constants';
-import { Except } from './helperComponents';
-import { EmptyStateProps } from './helperComponents/TableEmptyState';
+import { EmptyStateProps, Except } from './helperComponents';
 
 type ColumnAlign = ValueOf<typeof COLUMN_ALIGN>;
 
@@ -64,7 +63,26 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
   size: number;
 };
 
-export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
+type FilterableProps = {
+  id: string;
+  /** Название колонки в настройках таблицы */
+  headerConfigLabel?: string;
+};
+
+type FilterableNormalColumnDefinition<TData> = NormalColumnDefinition<TData> & FilterableProps;
+
+type FilterablePinnedColumnDefinition<TData> = PinnedColumnDefinition<TData> & FilterableProps;
+
+export type FilterableColumnDefinition<TData> =
+  | FilterableNormalColumnDefinition<TData>
+  | FilterablePinnedColumnDefinition<TData>;
+
+export type ColumnDefinition<TData> =
+  | NormalColumnDefinition<TData>
+  | PinnedColumnDefinition<TData>
+  | FilterableColumnDefinition<TData>;
+
+export type ColumnOrder = string[];
 
 export type {
   RowActionsColumnDefProps,