Function DataTableColumnSelector

src/client/components/DataTableColumnSelector.tsx:36–169

({
  columns,
  hiddenColumnIds,
  setHiddenColumnIds,
  columnOrder,
  setColumnOrder,
}: DataTableColumnSelectorProps<TData>)

}

export function DataTableColumnSelector<TData>({
  columns,
  hiddenColumnIds,
  setHiddenColumnIds,
  columnOrder,
  setColumnOrder,
}: DataTableColumnSelectorProps<TData>) {
  const { t } = useTranslation();

  const orderedColumns = useMemo(() => {
    if (!columnOrder || columnOrder.length === 0) {
      return columns;
    }
    const orderMap = new Map(columnOrder.map((id, index) => [id, index]));
    return [...columns].sort((a, b) => {
      const aIndex = orderMap.get(a.id!) ?? Number.MAX_SAFE_INTEGER;
      const bIndex = orderMap.get(b.id!) ?? Number.MAX_SAFE_INTEGER;
      return aIndex - bIndex;
    });
  }, [columns, columnOrder]);

  const toggleColumn = (columnId: string) => {
    setHiddenColumnIds((prev = []) => {
      if (prev.includes(columnId)) {
        return prev.filter((id) => id !== columnId);
      } else {
        return [...prev, columnId];
      }
    });
  };

  const handleDragEnd = (result: DropResult) => {
    if (!result.destination || !setColumnOrder) return;

    const currentOrder =
      columnOrder && columnOrder.length > 0
        ? columnOrder
        : columns.map((c) => c.id!);

    const newOrder = reorder(
      currentOrder,
      result.source.index,
      result.destination.index
    );
    setColumnOrder(newOrder);
  };

  const renderDraggableItem = (
    col: ColumnDef<TData>,
    dragProvided: DraggableProvided,
    snapshot: DraggableStateSnapshot
  ) => (
    <div
      ref={dragProvided.innerRef}
      {...dragProvided.draggableProps}
      className={`flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm ${
        snapshot.isDragging
          ? 'bg-white shadow-lg ring-1 ring-zinc-200 dark:bg-zinc-900 dark:ring-zinc-700'