Using a select within a cell

[RWaltersMA]

I have a cell that needs to have a select dropdown. I am using the react-select library and have defined by columns as follows:

var FieldTypes=[{value: 'text', label: 'text'}, {value: 'picklist', label: 'picklist'}, {value: 'date', label: 'date'}, {value: 'userlist', label: 'userlist'}, {value: 'checkbox', label: 'checkbox'}];


columns=[
   {
        Header: 'Type',
        accessor: 'type',
        Cell: ()=> 
                <Select options={FieldTypes} />
}..

I am looking for some guidance as to how to preselect an item in the drop down for each row in the table when the data gets loaded into the table. My data contains a value that matches the value in the options list.

Do I have to mess around with the tbody section and add something that checks to see if its the cell that contains the select component?

 <tbody {...getTableBodyProps()}>
            {rows.map(
              (row, i) => {
                prepareRow(row);
                return (
                  <tr {...row.getRowProps()}>
                    {row.cells.map(cell => {
SOMETHING HERE?
                      return (
                        <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                      )
                    })}
                  </tr>
                )}
            )}
          </tbody>

[RWaltersMA]

I think I solved it, not sure if this is the proper way to do this but I found setting the defaultValue will get the expected behavior

 {
        Header: 'Type',
        accessor: 'type',
        Cell: ({row})=> {
            return <Select options={FieldTypes} defaultValue={{ label: row.original.type, value: row.original.type}}/>

        }
      ```

[jiwoorico]

@RWaltersMA Hi, I'm also learning how to add a "select" dropdown in the cell, I met an issue that the dropdown in first page of table was shown correctly, while when I switched to 2nd, 3rd and other pages, the dropdown column showed always the same, do you have any idea why this happen?

[RWaltersMA]

Im not sure how pagination effects this as I didn't have that requirement. If you do figure it out, it would be good to post.

[jiwoorico]

ha, just posted here that I fixed my problem:
I missed the "key={cellInfo.index}" part which caused my problem. now it's ok

[sauldeleon]

Only solution I have found so far is ro repaint all rows when paginating, using the loading indicator of my BE call, instead of just rendering the new ones with the new data over the old ones. But this causes the style bounce effect of "having rows => no rows => having rows again" that is a bit ugly

For giving more info, inspecting the code while debugging I can see the correct props are being passed to the checkbox, true or false , but for whatever reason the render show as the original value in that cell :(

[sauldeleon]

codesandbox facing the same problem I think.
https://codesandbox.io/s/sleepy-microservice-nzf8p?file=/src/App.js

check / uncheck some cell, paginate to the next page, checkbox is not updated with proper value.

What am I missing?

[justin-tufte]

try overriding the getRowId function in the table options which you can use to return a unique id rather than letting the table generate its own.

something like this:
const getRowId = React.useCallback(row => { return row.id }, [])

[sauldeleon]

Hi @justin-tufte
thanks for your response.

Apparently this was a problem related with how React works managing the state of a controlled component. I had finally to pass externally the prop and use checked property rather than defaultCheked

But I want to try your current approach because now im facing the same issue as @jiwoorico , im setting a react-select component within a cell, and when changing from one page to the next one, data is not being refreshed and its showing the data of the first page.

Where I can put this getRowId override? could you please tell me that? in the useTable hook initialisation method maybe?

[justin-tufte]

Yep you would pass it in the useTable hook, here is snippet from one of the examples

const Table = ({ columns, data }) => {
  const [records, setRecords] = React.useState(data)

  const getRowId = React.useCallback(row => {
    return row.id
  }, [])

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    data: records,
    columns,
    getRowId,
  })
}

row-dnd example