Skip to content

Asset list

Interactive content inside a cell: a chip list that collapses past three items, where each chip is a button and the row click still behaves.

Report an issue

Loading example…

What it shows

The same server-backed account search as the account list, with one column doing something harder: showing a variable number of related items without letting the row grow.

  • Three chips and a count. The cell renders up to three assets and collapses the rest into a +N chip; the row's Inspect action opens the full list. The row height stays predictable however many assets an account has.
  • Each chip is a button. Clicking one selects that asset and does not trigger the row's own click handler. Interactive descendants are excluded from row clicks, so a cell can hold controls without fighting the row.
  • The widest column takes a share, with a floor. It gets 40% of the width and never less than 200px, so the identifying columns keep theirs.

How it is built

The whole behaviour is one cell renderer:

col.accessor((a) => getAccountAssets(a), {
  id: 'assets',
  header: 'Assets',
  width: '40%',
  minWidth: '200px',
  cell: ({ getValue, table }) => (
    <ChipList
      items={getValue()}
      maxVisible={3}
      renderChip={(asset) => (
        <button type="button" onClick={() => meta(table).onSelectAsset(asset)}>
          {assetLabel(asset)}
        </button>
      )}
    />
  ),
});

meta is how a cell reaches the screen around it. The column stays a pure renderer and the page supplies the callbacks, which is what keeps the column reusable across screens.

Edit this pageReport a problem with this page