import { DataTable } from '@uhg-abyss/web/ui/DataTable';
import { useDataTable } from '@uhg-abyss/web/hooks/useDataTable';

DataTable provides a drag-and-drop feature that allows users to reorder rows and columns easily.

Drag-and-drop rows

To enable drag-and-drop row reordering, set dragAndDropConfig.enableRowReorder to true.

const dataTableProps = useDataTable({
  // ...
  dragAndDropConfig: {
    enableRowReorder: true,
  },
  // ...
});

Use onRowsReordered to provide a callback function that is executed whenever rows are reordered. This function receives the following parameters:

• oldIndex: The index of the row before it was moved
• newIndex: The index of the row after it was moved
• prevData: The table data before reordering
• updatedData: The table data after the reordering

const dataTableProps = useDataTable({
  // ...
  dragAndDropConfig: {
    enableRowReorder: true,
    onRowsReordered: (oldIndex, newIndex, prevData, updatedData) => {
      console.log(`Row moved from index ${oldIndex} to ${newIndex}.`);
      console.log('Previous Data: ', prevData);
      console.log('Updated Data: ', updatedData);
    },
  },
  // ...
});

Drag-and-drop columns

To enable drag-and-drop column reordering, set dragAndDropConfig.enableColumnReorder to true.

const dataTableProps = useDataTable({
  // ...
  dragAndDropConfig: {
    enableColumnReorder: true,
  },
  // ...
});

Use onColumnsReordered to provide a callback function that is executed whenever columns are reordered. This function receives the following parameters:

• oldIndex: The index of the column before it was moved
• newIndex: The index of the column after it was moved
• prevColumnOrder: The order of the columns before reordering
• updatedColumnOrder: The order of the columns after reordering

const dataTableProps = useDataTable({
  // ...
  dragAndDropConfig: {
    enableColumnReorder: true,
    onColumnsReordered: (
      oldIndex,
      newIndex,
      prevColumnOrder,
      updatedColumnOrder
    ) => {
      console.log(`Column moved from index ${oldIndex} to ${newIndex}.`);
      console.log('Previous order: ', prevColumnOrder);
      console.log('Updated order: ', updatedColumnOrder);
    },
  },
});

Note: When enabling drag-and-drop columns, it is highly recommended to use the DataTable.TableSettingsDropdown subcomponent as well, which provides an alternative way for users to reorder columns. This is especially important for keyboard users, as drag-and-drop functionality can be challenging to use without a mouse.

Draggable rows & columns example

Component Tokens

Note: Click on the token row to copy the token to your clipboard.

Search tokens

DataTable Tokens

Token Name	Value
data-table.color.border.column-header.drag	#002677
data-table.color.border.root	#CBCCCD
data-table.color.border.row.drag	#002677
data-table.color.border.table	#CBCCCD
data-table.color.icon.column-header-menus.grouping.active	#002677
data-table.color.icon.column-header-menus.grouping.hover	#004BA0
data-table.color.icon.column-header-menus.grouping.rest	#196ECF
data-table.color.icon.column-header-menus.sorting.active	#002677
data-table.color.icon.column-header-menus.sorting.hover	#004BA0
data-table.color.icon.column-header-menus.sorting.rest	#196ECF
data-table.color.icon.drag-handle.active	#002677
data-table.color.icon.drag-handle.hover	#004BA0
data-table.color.icon.drag-handle.rest	#196ECF
data-table.color.icon.expander.active	#002677
data-table.color.icon.expander.disabled	#7D7F81
data-table.color.icon.expander.hover	#004BA0
data-table.color.icon.expander.rest	#196ECF
data-table.color.icon.utility.drag-alternative.active	#000000
data-table.color.icon.utility.drag-alternative.disabled	#7D7F81
data-table.color.icon.utility.drag-alternative.hover	#323334
data-table.color.icon.utility.drag-alternative.rest	#4B4D4F
data-table.color.icon.utility.filter.active	#002677
data-table.color.icon.utility.filter.hover	#004BA0
data-table.color.icon.utility.filter.rest	#196ECF
data-table.color.surface.column-header.active	#E5F8FB
data-table.color.surface.column-header.default	#F3F3F3
data-table.color.surface.column-header.drag	#E5F8FB
data-table.color.surface.footer	#F3F3F3
data-table.color.surface.header	#FFFFFF
data-table.color.surface.root	#FFFFFF
data-table.color.surface.row.drag	#E5F8FB
data-table.color.surface.row.even	#FAFCFF
data-table.color.surface.row.highlighted	#E5F8FB
data-table.color.surface.row.hover	#F3F3F3
data-table.color.surface.row.odd	#FFFFFF
data-table.color.surface.table	#FFFFFF
data-table.color.text.cell	#4B4D4F
data-table.color.text.column-header	#4B4D4F
data-table.color.text.header.heading	#002677
data-table.color.text.header.paragraph	#4B4D4F
data-table.border-radius.all.container	8px
data-table.border-width.all.column-header.drag	2px
data-table.border-width.all.root	1px
data-table.border-width.all.row.drag	2px
data-table.border-width.all.table	1px
data-table.sizing.all.icon.column-header-menus	20px
data-table.sizing.all.icon.drag-handle-row	24px
data-table.sizing.all.icon.expander-column	24px
data-table.sizing.all.icon.utility.drag-alternative	20px
data-table.sizing.all.icon.utility.filter	20px
data-table.sizing.height.cell.comfortable	48px
data-table.sizing.height.cell.compact	32px
data-table.sizing.height.cell.cozy	40px
data-table.spacing.gap.horizontal.button-group	8px
data-table.spacing.gap.horizontal.cell	4px
data-table.spacing.gap.horizontal.drag-alternative	8px
data-table.spacing.gap.horizontal.input-container	8px
data-table.spacing.gap.horizontal.slot-wrapper	24px
data-table.spacing.gap.vertical.column-header	2px
data-table.spacing.gap.vertical.header	4px
data-table.spacing.gap.filter-two-inputs	16px
data-table.spacing.padding.all.column-header	8px
data-table.spacing.padding.all.column-header-menus	2px
data-table.spacing.padding.all.header	16px
data-table.spacing.padding.all.result-text	16px
data-table.spacing.padding.all.slot-wrapper	16px
data-table.spacing.padding.horizontal.cell	8px
data-table.spacing.padding.vertical.button-group	8px
data-table.spacing.padding.vertical.cell	4px
data-table.elevation.column.pinned.left	6px 0px 8px -2px rgba(0,0,0,0.16)
data-table.elevation.column.pinned.right	-6px 0px 8px -2px rgba(0,0,0,0.16)
data-table.elevation.column-header	0px 6px 8px -2px rgba(0,0,0,0.16)
data-table.elevation.table-settings-dropdown.section-header	0px 2px 4px -2px rgba(0,0,0,0.16)