Repository navigation
selections not working if columns pulled from state? #418
Description
In my application, I need to dynamically create the columns and then have the pull the columns from the state. However, when I do this, the code to update the row state does not work. Below is a simplified version, showing the issue. If you run this code, when you select the checkbox, the state does not get updated correctly.
If, however, I change BaseTable and set the columns= the actual array, then the selection process works.
Code that does not work
/* eslint-disable */
import React, { useState,useEffect } from 'react';
import BaseTable, { Column } from 'react-base-table';
import 'react-base-table/styles.css';
const MultiSelectTable = () => {
const [selectedRows, setSelectedRows] = useState([]);
const [columns, setColumns] = useState([])
useEffect(()=>{
setColumns(
[
{
key:"checkbox",
title:"",
width:50,
selectedRowKeys:{selectedRows},
cellRenderer:({ rowData }) => (
<input
type="checkbox"
checked={selectedRows.includes(rowData.id)}
onChange={() => handleRowSelection({ rowData })}
/>
)}
,
{key:"name", dataKey:"name", title:"Name", width:200},
{key:"age", dataKey:"age", title:"Age", width:100}
]
)
},[])
const handleRowSelection = ({ rowData }) => {
const selectedRowKeys = [...selectedRows];
const rowIndex = selectedRowKeys.indexOf(rowData.id);
if (rowIndex !== -1) {
selectedRowKeys.splice(rowIndex, 1);
} else {
selectedRowKeys.push(rowData.id);
}
setSelectedRows(selectedRowKeys);
console.log(selectedRowKeys)
};
const data = [
{ id: 1, name: 'John Doe', age: 25 },
{ id: 2, name: 'Jane Smith', age: 30 },
{ id: 3, name: 'Bob Johnson', age: 35 },
// Add more data as needed
];
return (
<BaseTable
width={600}
height={400}
data={data}
columns={columns}
rowKey="id"
/>
);
};
export default MultiSelectTable;
Code that works:
/* eslint-disable */
import React, { useState,useEffect } from 'react';
import BaseTable, { Column } from 'react-base-table';
import 'react-base-table/styles.css';
const MultiSelectTable = () => {
const [selectedRows, setSelectedRows] = useState([]);
const handleRowSelection = ({ rowData }) => {
const selectedRowKeys = [...selectedRows];
const rowIndex = selectedRowKeys.indexOf(rowData.id);
if (rowIndex !== -1) {
selectedRowKeys.splice(rowIndex, 1);
} else {
selectedRowKeys.push(rowData.id);
}
setSelectedRows(selectedRowKeys);
console.log(selectedRowKeys)
};
const columns= [
{
key:"checkbox",
title:"",
width:50,
selectedRowKeys:{selectedRows},
cellRenderer:({ rowData }) => (
<input
type="checkbox"
checked={selectedRows.includes(rowData.id)}
onChange={() => handleRowSelection({ rowData })}
/>
)}
,
{key:"name", dataKey:"name", title:"Name", width:200},
{key:"age", dataKey:"age", title:"Age", width:100}
]
const data = [
{ id: 1, name: 'John Doe', age: 25 },
{ id: 2, name: 'Jane Smith', age: 30 },
{ id: 3, name: 'Bob Johnson', age: 35 },
// Add more data as needed
];
return (
<BaseTable
width={600}
height={400}
data={data}
columns={columns}
rowKey="id"
/>
);
};
export default MultiSelectTable;
How can I load the columsn dynamically into state but still have the selection of rows work?
Activity
xiaoxudoo commentedon Sep 7, 2023
ignoreFunctionInColumnCompare may be works for u....
see this demo:https://autodesk.github.io/react-base-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA