Multiple colspan #3744
Replies: 3 comments 1 reply
-
|
Hi |
Beta Was this translation helpful? Give feedback.
-
|
We are using the code described above in production. So feel free to implement a similar solution if you need |
Beta Was this translation helpful? Give feedback.
-
|
Does this work in react-table V8? Please |
Beta Was this translation helpful? Give feedback.
-
|
https://tanstack.com/table/v8/docs/framework/react/examples/custom-features I wrote a Custom Feature to do something similar: import type { TableFeature, ColumnDef, RowData } from "@tanstack/react-table";
interface ColSpanOptions<T> {
headerColSpan?: number;
bodyColSpan?: number;
}
// Use declaration merging to add our new feature APIs and state types to TanStack Table's existing types.
declare module "@tanstack/react-table" {
interface ColumnMeta<TData extends RowData, TValue> extends ColSpanOptions<TData> {}
}
// Export feature to use in useReactTable's _features array
export const ColSpanFeature: TableFeature = {
getDefaultColumnDef: <TData extends RowData>(): Partial<ColumnDef<TData>> => {
return {
meta: {
bodyColSpan: 1,
headerColSpan: 1,
},
};
},
};Add it to your table's list of features: const table = useReactTable<Talent>({
_features: [ColSpanFeature],
data, columns, etc
});Then you can set it in a column definition like this: {
accessorKey: 'example'
header: 'Example',
meta: { bodyColSpan: 2 }
}And render it in your table by getting it with this: const colSpan = cell.column.columnDef.meta?.bodyColSpan ?? 1; |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
The idea is to give the possibility to achieve this result:
I want to open a discussion about the possibility to have multiple colspan columns.
I actually achieved editing the useBlockLayout adding a logic to consider the widget of the next columns too
with calculateColumnWidth similar to
and then using it in the render assigning to each cell the expected value:
What do you think? Can be useful to include it in the useBlockLayout? In case I can prepare a PR
Beta Was this translation helpful? Give feedback.
All reactions