selections not working if columns pulled from state?

[ElixirMike]

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?

[xiaoxudoo]

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