Table cell styling prevents content overflow

[PKulkoRaccoonGang]

Description

Interactive content within DataTable cells, such as dropdown menus or tooltips, is being clipped (cut off) at the cell boundary. This prevents the full content of the overlay from being displayed, making the features unusable.

Screen.Recording.2025-11-18.at.16.33.31.mov

Code example

() => {
  const TableAction = ({ tableInstance }) => (
    // Here is access to the tableInstance
    <Button onClick={() => console.log('TableAction', tableInstance)}>
      Enroll
    </Button>
  );

  const EnrollAction = ({ selectedFlatRows, ...rest }) => (
    // Here is access to the selectedFlatRows, isEntireTableSelected, tableInstance
    <Button variant="danger" onClick={() => console.log('Enroll', selectedFlatRows, rest)}>
      Enroll
    </Button>
  );

  const AssignAction = (props) => (
    <Button onClick={() => console.log('Assign', props)}>
      Assign
    </Button>
  );

  const ExtraAction = ({ text, selectedFlatRows, ...rest }) => (
    <Button onClick={() => console.log(`Extra Action ${text}`, selectedFlatRows, rest)}>
      {`Extra Action ${text}`}
    </Button>
  );

  return (
    <DataTable
      isSelectable
      itemCount={7}
      tableActions={[
        <TableAction />,
      ]}
      bulkActions={[
        <EnrollAction />,
        <AssignAction />,
        <ExtraAction text="1" />,
        <ExtraAction text="2" />,
      ]}
      additionalColumns={[
        {
          id: 'action',
          Header: 'Action',
          Cell: ({ row }) => <DropdownButton id="dropdown-basic-button" title="Dropdown button">
  <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
  <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
  <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</DropdownButton>,
        }
      ]}
      data={[
        {
          name: 'Lil Bub',
          color: 'brown tabby',
          famous_for: 'weird tongue',
        },
        {
          name: 'Grumpy Cat',
          color: 'siamese',
          famous_for: 'serving moods',
        },
        {
          name: 'Smoothie',
          color: 'orange tabby',
          famous_for: 'modeling',
        },
        {
          name: 'Maru',
          color: 'brown tabby',
          famous_for: 'being a lovable oaf',
        },
        {
          name: 'Keyboard Cat',
          color: 'orange tabby',
          famous_for: 'piano virtuoso',
        },
        {
          name: 'Long Cat',
          color: 'russian white',
          famous_for:
            'being loooooooooooooooooooooooooooooooooooooooooooooooooooooong',
        },
        {
          name: 'Zeno',
          color: 'brown tabby',
          famous_for: 'getting halfway there'
        },
      ]}
      columns={[
        {
          Header: 'Name',
          accessor: 'name',
        },
        {
          Header: 'Famous For',
          accessor: 'famous_for',
        },
        {
          Header: 'Coat Color',
          accessor: 'color',
        },
      ]}
    >
      <DataTable.TableControlBar />
      <DataTable.Table />
      <DataTable.EmptyTable content="No results found" />
      <DataTable.TableFooter />
    </DataTable>
  )
}