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

[dgraham-nectivio]

I handled this by making a TableFeature

import { Column, RowData, TableFeature } from "@tanstack/react-table";

export type Alignment = "left" | "center" | "right";

export interface ColumnAlignmentColumnDef {
  align?: Alignment;
}

export interface ColumnAlignmentColumn {
  getAlignment: () => Alignment | undefined;
}

declare module "@tanstack/react-table" {
  // eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-unused-vars
  interface Column<TData extends RowData, TValue> extends ColumnAlignmentColumn {}
}

declare module "@tanstack/table-core" {
  // eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-unused-vars
  interface ColumnDefBase<
    TData extends RowData,
    TValue = unknown,
  > extends ColumnAlignmentColumnDef {}
}

export const ColumnAlignment: TableFeature = {
  createColumn: <TData extends RowData, TValue>(column: Column<TData, TValue>): void => {
    column.getAlignment = () => column.columnDef?.align ?? "left";
  },
};

This feature adds a property called align to your ColumnDefs than you can set.

     columnHelper.accessor("quantity", {
        header: "Quantity",
        align: "right",
      }),

Then when rendering the <td> for a cell you can do column.getAlignment() and apply an appropriate style