T
TanStack•5mo ago
rival-black

Dynamic column minSize?

Hi all, I'm looking for a clean way to have dynamic minSize across my table, working along with resizing. Basically I want columns to have a certain minSize based on the container and never letting it go below that point, if larger then overflow no problem. Would be great if someone could give a pointer on how I could approach this.
2 Replies
robust-apricot
robust-apricot•5mo ago
I feel like I’ve attempted something similar before. Realistically I think you’d need to override the CSS display prop of your table elements to enable any dynamic sizing as standard table layout does not support this behaviour AFAIK.
deep-jade
deep-jade•5mo ago
I used meta to accomplish something like that: 
columnHelper.accessor("targetType", {
  header: "Target Type",
  meta: {
    className: "min-w-75 tablet:min-w-100",
  },
  // …
}

// …

<th className={header.column.columnDef.meta?.className}>
 // …
</th>
columnHelper.accessor("targetType", {
  header: "Target Type",
  meta: {
    className: "min-w-75 tablet:min-w-100",
  },
  // …
}

// …

<th className={header.column.columnDef.meta?.className}>
 // …
</th>

Did you find this page helpful?