Cells not growing to accommodate content

[JayBox325]

Issue Check list

• Agree to the Code of Conduct
• Read the README
• You are using React 16.8.0+
• You installed styled-components
• Include relevant code or preferably a code sandbox

Describe the bug

When I have a flex row list of items in a cell, the width just can't seem to cope or adjust to fit all the items in.

To Reproduce

(See sandbox link below)

• Note the tags in the movies.js
• Note the tags column and the custom cell
• See the overflowing content from this cell

Expected behavior

I'd expect the cell to be able to accommodate the width of the tags within.

Code Sandbox, Screenshots, or Relevant Code

Please include a codesandbox to help expedite troublshooting.

https://codesandbox.io/p/sandbox/react-data-table-forked-985fg8?file=%2Fsrc%2Findex.js%3A24%2C11

Here is my codebase:

const columnsConfig = [
        {
            name: 'Title',
            sortable: true,
            selector: row => row.title,
            grow: 4,
            visible: true,
            editable: false
        },
        {
            name: 'Free',
            sortable: true,
            grow: 1,
            selector: row => row.freeToRead,
            cell: row => row.freeToRead ? 'Yes' : 'No',
            visible: true,
            editable: true
        },
        {
            name: 'Category',
            sortable: true,
            grow: 2,
            selector: row => row.category,
            visible: true,
            editable: true
        },
        {
            name: 'Published',
            sortable: true,
            selector: row => row.publishedDate,
            cell: row => formatDate(row.publishedDate),
            grow: 2,
            visible: true,
            editable: true
        },
        {
            name: 'Updated',
            sortable: true,
            grow: 2,
            selector: row => row.updatedDate,
            cell: row => row.updatedDate && formatDate(row.updatedDate),
            visible: true,
            editable: true
        },
        {
            name: 'Read Time',
            sortable: true,
            grow: 1,
            selector: row => row.readTime,
            cell: row => row.readTime && `${row.readTime} Mins`,
            visible: false,
            editable: true
        },
        {
            name: 'Tags',
            sortable: false,
            selector: row => row.tags,
            cell: row => row.tags.length && <ul className="max-w-full w-full flex flex-row gap-2">{row.tags.map((tag,n)=>(<li className="whitespace-nowrap bg-neutral-100 border border-neutral-300 flex items-center justify-center font-medium text-xs h-6 px-2 rounded-md" key={n}>{tag}</li>))}</ul>,
            visible: true,
            grow: 5,
            editable: true
        },
        {
            name: 'Hero Style',
            sortable: true,
            grow: 1,
            selector: row => row.heroStyle,
            visible: false,
            editable: true
        },
    ]

I have found the only way to get around it for now, is to set Grow to be 5 on the tags column, but this only works for articles with fewer than 4 or 5 tags, which is not ideal for scaling.

Versions (please complete the following information)

• React - 18.3.1 (Astrojs/react 3.6.2)
• Styled Components - 6.1.13
• OS - OS Sonoma 14.3.1
• Browser - Chrome

[bochove]

Duplicate:
#981