Allow custom cards to build tables with definable column widths

HubSpot Ideas
1

There’re some real formatting limitation when trying to build tables in custom CRM cards, mainly around the fact you have zero control over the width of the columns.

Tables on custom cards adds a huge amount of customisability to HubSpot to deliver bespoke solutions for challenges that a lot of users likely have!!

What we’d like
A supported way to control the rendered width (and ideally height/font size) of interactive input components — even a constrained set of options would be enough. For example:

  • a width / size prop on Input / NumberInput / Select, or
  • having these controls honour Box flex / fill their container the way read-only cells do, or
  • a documented “fill cell” behaviour for inputs placed inside TableCell.

We understand the goal of keeping the CRM visually consistent, so this doesn’t need to be arbitrary CSS — just enough control to build a usable editable grid within HubSpot’s own design system.

Association table cards already offer user-adjustable cell widths in tables, with a mix of read-only and editable fields, so if anything this feature allows closer synergy between a custom card’s table and default visuals.

Impact
This is the single blocker preventing UI-extension cards from replicating the editable line-item / table experiences that HubSpot ships natively. Any app trying to build an in-grid editor hits the same wall.

Use case

We have a lot of custom-logic & function requirements for building quotes that the native “Configure line items” screen doesn’t deliver on*, so we’ve created a custom line-item card that mimics HubSpot’s native “Configure line items” screen — an editable grid of products with Qty, Unit price, Discount, part numbers, etc. The natural design is an editable table: one row per line, inputs in each column. But because the inputs can’t be widened to fill their columns, the grid is unusable for editing — every field is a cramped ~30px box regardless of the column width. Our only workaround is to make the whole table read-only and push all editing into a separate side panel, one line at a time, which is a big step back from a spreadsheet-style editor.

* specifically:

  • Can’t handle cost price being a different currency to unit price
  • Can’t handle bundles (yes there’re 3rd party add-ons, but they still don’t solve the bigger picture)
  • Some of our products require us to get a quotation from the supplier case-by-case, so need to flag where that’s the case
  • Handling cloning/moving/deleting multiple lines at once
  • Handling >1 SKU per product that can all be searched against
  • More advanced searching logic & flagging (if SKU xxx.xxx.xxx is searched, it shows xxx.xxx.xxx and xxx.xxx.xxx.1, etc. with no flag to highlight this isn’t an exact match)
  • Handling inflationary price increases for multi-year contracts (in custom cards, we can teach logic to say SKU X denotes the start of a new year, and what % uplift to apply per year) that applies to both price and cost
  • Being able to change the FX rate to look at how margins would be affected if the GBP-EUR rate changed given we buy from suppliers in EUR and sell to customers in GBP, etc.