Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

selections not working if columns pulled from state?

Aberta
  • Algo errado?
#418 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
30/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
javascript, react
Domínio
frontend

Direção de pesquisa

Reproduza o exemplo fornecido de MultiSelectTable, comparando as columns criadas em useEffect com o array de columns inline passado para BaseTable. Rastreie como as columns baseadas em estado e cellRenderer observam selectedRows e, em seguida, verifique se selecionar uma caixa de seleção atualiza tanto selectedRows quanto o estado renderizado da caixa de seleção.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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?

Linguagem predominante
TypeScript
Estrelas
1.5k
Forks
170
Nenhum PR com merge em 30d

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de Autodesk/react-base-table

Todas as issues de Autodesk/react-base-table

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.