c415b2d7f5
* feat: apply full width automatically for DataTable * change implementation * load all columns of insights routing table at the same time * update team member list * sticky columns for >= sm * fix type error --------- Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
27 lines
1.2 KiB
TypeScript
27 lines
1.2 KiB
TypeScript
import type { Table } from "@tanstack/react-table";
|
|
// eslint-disable-next-line no-restricted-imports
|
|
import kebabCase from "lodash/kebabCase";
|
|
import { useMemo } from "react";
|
|
|
|
export const useColumnSizingVars = <TData>({ table }: { table: Table<TData> }) => {
|
|
const headers = table.getFlatHeaders();
|
|
const columnSizingInfo = table.getState().columnSizingInfo;
|
|
const columnSizing = table.getState().columnSizing;
|
|
|
|
return useMemo(() => {
|
|
const headers = table.getFlatHeaders();
|
|
const colSizes: { [key: string]: string } = {};
|
|
headers.forEach((header) => {
|
|
const isAutoWidth = header.column.columnDef.meta?.autoWidth;
|
|
colSizes[`--header-${kebabCase(header.id)}-size`] = isAutoWidth ? "auto" : `${header.getSize()}px`;
|
|
colSizes[`--col-${kebabCase(header.column.id)}-size`] = isAutoWidth
|
|
? "auto"
|
|
: `${header.column.getSize()}px`;
|
|
});
|
|
return colSizes;
|
|
// `columnSizing` and `columnSizingInfo` are not used in the memo,
|
|
// but they're included in the deps to ensure the memo is re-evaluated when they change.
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [headers, columnSizingInfo, columnSizing]);
|
|
};
|