Is there a way to group common columns without loosing type safety?

[IamAyaanSk]

I was working on creating a ssr table using shadcn and tanstack table, I was able to make a reusable datatable component but I was stuck finding an ideal approach to handle common columns among tables .

Consider the below code snippet. I am separating common columns by creating a separate columndef array with any, is there a more better way which is type safe to achieve this?

const transactionAndLedgerCommonColumns: ColumnDef<any>[] = [
  {
    accessorKey: 'amount', 
    header: ({ column }) => <DataTableColumnHeader column={column} title="Amount" />, 
    cell: ({ row }) => { 
      const amount = parseFloat(row.getValue('amount')) 
      const formatted = formattedMoney(amount) 
      return <div>{formatted}</div> 
    } 
  } 
] 

This is how I am then using it

export const downlineWalletLedgerColumns: ColumnDef<TGetDownlineWalletLedgersResponseBody[number]>[] = [
  { ...(organizationColumn as any) },
  ...(commonLedgerColumns as any)
]

As this is not quite type safe as there are any everywhere. Can you please suggest a more better way.

[adrianjmejias]

A discriminated type could help here