I've intialized a basic shad/cn data table component from the docs.
How do I change the max-width of a column?

I've tried placing a max-w-[100px] on both the header div and the cell div in the columns.tsx file,
but as seen in the first image, the column cell itself is shrunk to 100px but the actual <th> or <td> itself is unaffected.

The second image is what I would like to happen - the amount column being 100px regardless of screensize.

 
export const columns: ColumnDef<Payment>[] = [
 ...
  {
    accessorKey: "amount",
    header: ({ column }) => {
      return (
        <div className="flex max-w-[125px] justify-end">
          <Button
            variant="ghost"
            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          >
            Amount
            {column.getIsSorted() === "asc" ? (
              <ArrowUpIcon className="ml-2 h-3 w-3" />
            ) : (
              <ArrowDownIcon className="ml-2 h-3 w-3" />
            )}
          </Button>
        </div>
      )
    },
    cell: ({ row }) => {
      const { amount } = row.original
      const formatted = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
      }).format(amount)

      return (
        <div className="max-w-[125px] px-4 text-right font-medium">{formatted}</div>
      )
    },
  },
]