Table: enhances the ability to have clickable elements inside a cell

[tinkertrain]

Problem

Sometimes we need a link or button inside a cell and have onRowClick, but we don't want to fire 2 events, we just want to fire the event of the clicked (or enter press) element.

If you have focusable elements inside the cells, such as an or AND have focusableRows set to true, you might want to set tabindex=-1 on any element you don't want to focus, see the story and code below where we do this to the link, but leave the button focusable

Also, often we need to clear the padding on the cell and apply our own on cells from a certain column, DOing so via styled components is currently possible, but overcomplicated. So we add a custom field on the columns data: clearCellPadding, when passing this, we set the padding for all the cells in a specific column to 0.

For convenience, if using this plus renderCell, add a class name of fill-table-cell to the root element returned in renderCell to apply styles that will fill the cell with the correct padding (see default story).

Story showcasing this: https://f8724e88.hsds-react.pages.dev/iframe?id=components-structural-table--default-story&args=&viewMode=story

Code example:

const LinkUI = styled('a')`
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px 14px;
  width: 100%;
  height: 100%;
`

const columns = [
        {
          title: 'Name',
          columnKey: 'name',
          width: '33%',
          clearCellPadding: true,
          renderCell: ({ name }) => {
            return (
              <LinkUI href="#" tabIndex="-1">
                {name}
              </LinkUI>
            )
            // alternatively, skip the styled component:
            return (
              <a className="fill-table-cell" href="#" tabIndex="-1">
                {name}
              <a>
            )
          },
        },
       {
          title: 'Email',
          columnKey: 'emails',
          align: 'center',
          renderCell(cellData) {
            return (
              <Button
                style={{ width: '120px' }}
                size="xxs"
                onClick={e => {
                  console.log('button activated:click')
                }}
              >
                Email {cellData.row.firstName}
              </Button>
            )
          },
          width: '34%',
        },
 ]

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	94d316d
Status:	✅  Deploy successful!
Preview URL:	https://fbdba88f.hsds-react.pages.dev

View logs