58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
import {
|
|
type OnChangeFn,
|
|
type SortingState,
|
|
type Updater,
|
|
} from "@tanstack/react-table";
|
|
|
|
export const SKILLS_TABLE_EMPTY_ICON = (
|
|
<svg
|
|
className="h-16 w-16 text-muted-foreground/50"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M4 7h16" />
|
|
<path d="M4 12h16" />
|
|
<path d="M4 17h16" />
|
|
<path d="M8 7v10" />
|
|
<path d="M16 7v10" />
|
|
</svg>
|
|
);
|
|
|
|
/**
|
|
* Small helper for supporting both controlled and uncontrolled table sorting.
|
|
*
|
|
* TanStack Table expects a `sorting` state + `onSortingChange` callback.
|
|
* Some pages want to control this from the URL (shareable links), while others
|
|
* are fine letting the table manage it internally.
|
|
*/
|
|
export const useTableSortingState = (
|
|
sorting: SortingState | undefined,
|
|
onSortingChange: OnChangeFn<SortingState> | undefined,
|
|
defaultSorting: SortingState,
|
|
): {
|
|
resolvedSorting: SortingState;
|
|
handleSortingChange: OnChangeFn<SortingState>;
|
|
} => {
|
|
const [internalSorting, setInternalSorting] =
|
|
useState<SortingState>(defaultSorting);
|
|
const resolvedSorting = sorting ?? internalSorting;
|
|
const handleSortingChange: OnChangeFn<SortingState> =
|
|
onSortingChange ??
|
|
((updater: Updater<SortingState>) => {
|
|
setInternalSorting(updater);
|
|
});
|
|
|
|
return {
|
|
resolvedSorting,
|
|
handleSortingChange,
|
|
};
|
|
};
|