V8: Is there any simple way to set alignment of column header and body cell?

[nimeshvaghasiya]

    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?

[nimeshvaghasiya]

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}

[Kolobamanacas]

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.

Tanstack Docs
TypeScript Docs

[adrian-cytrix]

why not fix this simple issue?
why extend and declare this simple but make it trivial on the part of the dev?

[bvanderdrift]

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
    },
    ...