vendredi 12 mai 2023

When i select the `select all` checkbox the each checkbox is not selected visually, but i can see that are selected in the state

I am writing react and i have a Table component in ant design and i want to select all the records that exists in all pages and not in every page that is the default. My code is like this

<Table
   style=
   rowSelection={SelectionConfig}
   ......


 const {selectedRows} = this.state

 const SelectionConfig = {
  selectedRows,
    onSelect: (record, selected, selectedRows, nativeEvent) => {
        this.setState({selectedRows: selectedRows})
        this.props.updateFieldsToCreate(selectedRows)
  },
  columnTitle: () => {
    return(
      <div>
      <Checkbox
        checked={selectedRows.length}
        indeterminate={
          selectedRows.length > 0 &&
          selectedRows.length < this.state.polygonData.length
        }
        onChange={(e) => {
          const { checked } = e.target;
          const selectedRows = checked
            ? this.state.polygonData.map((r) => r)
            : [];
          this.setState({ selectedRows: selectedRows }, () => {
            this.props.updateFieldsToCreate(selectedRows);
          });
        }}
      />
      </div>
    )
  },
  type: "checkbox",
  fixed: true,
}

When i console.log my stateselectedRows i can see that has data and i can sent this data to my server. But the each row seems that it is not selected only visually like this. I have find this it's help me to find how to choose all the data. How i can make this visual so the user can know that has select all the rows in every page.




Aucun commentaire:

Enregistrer un commentaire