-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
V8: Is there any simple way to set alignment of column header and body cell? #4439
-
const columns: ColumnDef<any,any>[] = [
{
accessorKey: "customerName",
header: "Customer"
},
{
accessorKey: "detail",
header: "Detail",
enableSorting: false
},
...
is there any way to make it simple like align: 'center' or className: 'text-center',
which should applies to both header and body cells?
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
Done based on this: #4097
fixed with applying below to columnDef:
style: {textAlign: "center"}
and use below to apply style to table header:
style={(header.column.columnDef.meta as any)?.style}
Replies: 3 comments 1 reply
-
Done based on this: #4097
fixed with applying below to columnDef:
style: {textAlign: "center"}
and use below to apply style to table header:
style={(header.column.columnDef.meta as any)?.style}
Beta Was this translation helpful? Give feedback.
All reactions
-
Just in case anyone is interested in "anyless" approach. You could also create *.d.ts file, for example main.d.ts and put it anywhere in your project, for example in the root of your src folder and add the following code there:
import '@tanstack/react-table' declare module '@tanstack/table-core' { interface ColumnMeta<TData extends RowData, TValue> { style: { textAlign: 'left' | 'center' | 'right' } } }
And then header.column.columnDef.meta.style.textAlign will be typed properly.
Beta Was this translation helpful? Give feedback.
All reactions
-
😄 2 -
🎉 1 -
👀 2
-
why not fix this simple issue?
why extend and declare this simple but make it trivial on the part of the dev?
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 2
-
At the risk of being redundant, you can simply define a react component.
This will obviously not apply to both cell & header, but maybe this already helps someone.
E.g. (from original post)
const columns: ColumnDef<any,any>[] = [
{
accessorKey: "customerName",
header: () => <div style={{ textAlign: "right" }}>"Customer"</div>
},
{
accessorKey: "detail",
header: "Detail",
enableSorting: false
},
...
Beta Was this translation helpful? Give feedback.