v8 column alignment?

[bzbetty]

Strugglig to find a way to set the column alignment in v8, is there an align property somehwere or a way to add metadata to columns?

[bzbetty]

ok appears a column has a meta propery typed as unknown.

So can put an align in there then cast it when making the td

 {
    header: 'header',
    accessorFn: x => x.number
    meta: {
      align: 'right'
    },
  },

<td key={cell.id} align={(cell.column.columnDef.meta as any)?.align}>

[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

[nimeshvaghasiya]

@bzbetty can someone set label to V8 for this discussion?

didn't see this discussion on v8 label, so opens up new one #4439

[k1eu]

None of these things have been working for me on 8.9.7 Last resort I used float-right on the element inside the cell to position it on the right and it works! Never thought I'd use float again..

[nathan-isaac]

Just a note to get this to work with @tanstack/react-table. Using declare module '@tanstack/table-core' doesn't work as written from the docs. I had to use the following.

import '@tanstack/react-table';

declare module '@tanstack/react-table' {
  interface ColumnMeta<TData extends RowData, TValue> {
    align?: 'left' | 'right';
  }
}

Docs: https://tanstack.com/table/v8/docs/api/core/column-def#meta
Source: #4157 (reply in thread)

[dinogomez]

This works for me, hope it helps.

{
    accessorKey: "isDelivered",
    header: () => <div className="text-center">Delivered</div>,
    cell: ({ row }) => {
      const value: string = row.getValue("isDelivered");
      if (value === "No") {
        return (
          <div className="text-center">
            <Badge variant="destructive">{value}</Badge>
          </div>
        );
      }
      return <Badge variant="outline">{value}</Badge>;
    },
},

Change the cell alignment with a enclosed div

<div className="text-center">
          {row.getValue("yourValue")}
</div>

Change the header alignment to your choosing. text-center, text-right/left

header: () => <div className="text-center">Delivered</div>,

[tobyCurtis]

If you do this. the sorting arrows get pushed down because the div is a block element