Component in a column cell only only renders once ignoring filtering, sorting or pagination.

[PKWebAppDev]

Hello all.

I've been playing around with the library and have hit a roadblock. Now I've been looking through the documentation and past issues on the repo, and can't seem to find something hugely similar.

Basically I have a column like so

`
const columns = [
. . .

{
    name: 'Actions',
    selector: 'userid',
    sortable: true,
    cell: d => <div>

        {d.userid}
        <ColModalButton userid={d.userid} />

    </div>


},

]
`
Basically for each row, I have an Actions column where I can press a button to open a Modal with a userid prop that is used to fetch pertinent data from an API.

However, these ColModalButton components inside the cell, are only rendered once during the initial render.

So as a result, when you use Filtering, Sorting or Pagination, the order of ColModalButton's for Page 1 will not rerender to reflect changes and will persist no matter how the table is filtered/sorted/paged.

For example, if my RDT's very first row is 225.

and I go to the next page, where that first row has userid 231,

If I press user 231's ModalButton, I still get 225's Modal render since it never rerendered after initialization.

I know this is the culprit since I've disabled filtering,sorting and pagination and every modal displays the correct information through the API but then the table is too large to work with.

What are the easiest options here? Could I force a rerender maybe on "onSort" or "onChangePage"?

I define my RDT as such `const BasicTable = ({ data, col }) => {

const [filterText, setFilterText] = React.useState('');
const filteredItems = data.filter(item => item.fName.toLowerCase().includes(filterText.toLowerCase())
    || item.lName.toLowerCase().includes(filterText.toLowerCase())
    || item.email.toLowerCase().includes(filterText.toLowerCase())
);

const [filterCols, setFilterCols] = React.useState('');



const filteredCols = columns

const [highlight, setHighlight] = React.useState(false);
return (
    <DataTable
        title="Water Club Members"
        columns={col}
        theme='dark'
        

        highlightOnHover={true}
        data={filteredItems}
        striped
    
        pagination

        conditionalRowStyles={conditionalRowStyles}
        
        subHeader
        subHeaderComponent={<Filter onFilter={value => setFilterText(value)} />}

    />
);

};`

[jbetancur]

I would have to see all of your code or preferably a codesandbox. I see you may be managing column state in React state which might be the culprit, but need to see all the code.

Here is a quick code sandbox where I just put some buttons with an onClick handler and sorting or paging and filtering shows the correct id.

https://codesandbox.io/s/react-data-table-sandbox-render-check-k8zki

[PKWebAppDev]

Hi John,

I'll try to produce my error in that sandbox you've supplied, but it is a bit hard since I had to use my own API.

In the meantime, basically what I ended up doing was essentially forcing a (albeit inelegant) work-around to my issue.

On the modal's open hook set to true, I fetch data on a modal by modal basis. Of course, I'm fully aware of how this boggles performance as I scale up but for now, this does work for me.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.