How to sync the antd multiple select table checkbox state with a select option

Asked
Active3 hr before
Viewed126 times

10 Answers

tablecheckboxoptionselectstatemultiple
90%

hi do you know how I can tick or untick the checbox in the table, when I select an option in the select dropdown. – ttt Jul 14 at 15:15 ,Connect and share knowledge within a single location that is structured and easy to search.,Please be sure to answer the question. Provide details and share your research!

You should use state value for Select component.

const [selectedValues, setSelectedValues] = useState(null);

<Select  style={{ width: 120 }} value={selectedValues.find(/*write find function that will based on key of record*/) ? "Active" : "Inactive"} >
            <Option value="Active">Active</Option>
            <Option value="Inactive">Inactive</Option>
          </Select>


const rowSelection = { 
     onChange: (selectedRowKeys: any, selectedRows: any) => {
      console.log("selectedRows ",selectedRows)
      console.log("selectedRows ",selectedRowKeys)

      setSelectedValues(selectedRows);
      },
    getCheckboxProps: (record: any) => ({
    
      
    }),
  };
88%

 Pretag team - issue, fix, solve, resolve
72%

selection happens when clicking checkbox by default. You can see https://codesandbox.io/s/000vqw38rl if you need row-click selection behavior.,column.sorter support multiple to config the priority of sort columns. Though sorter.compare to customize compare function. You can also leave it empty to use the interactive only.,Use sorter to make a column sortable. sorter can be a function of the type function(a, b) { ... } for sorting data locally.

Specify dataSource of Table as an array of data.

const dataSource = [
  {
    key: '1',
    name: 'Mike',
    age: 32,
    address: '10 Downing Street',
  },
  {
    key: '2',
    name: 'John',
    age: 42,
    address: '10 Downing Street',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

<Table dataSource={dataSource} columns={columns} />;
load more v
65%

antd strictly follows Semantic Versioning 2.0.0.,🛠 Optimize state display logic of select all checkbox in Table. #30811 @kerm1it,Table🛠 Optimize state display logic of select all checkbox in Table. #30811 @kerm1it🐞 Fix Table column which contains filters or sorters cannot work with onClick and ellipsis property. #30799

/n

antd strictly follows Semantic Versioning 2.0.0.

antd
load more v
75%

in multiple select mode, when the option is more than ten, one by one select efficiency is very low, so i wish has a quick select/deselect function just like bootstrap-select,How could this be implemented with getFieldDecorator? The values change on the field but the select UI doesn't update to reflect the changes,Having a similar problem here about 'clear all'.... Seen from the doc, we have an 'allowClear' option which is to show a inline span with 'x' to the right of the option (works for multiple mode as well).

<Select
        mode="multiple"
        selectControl={true/false(default)}
      >
</select>
load more v
40%

Create a table with checkbox and radio buttons to select the row.,Row click is not able to select/de-select the checkbox and radio buttons associated with the row.,The Row click must select/de-select the checkbox and radio buttons associated with the row.

/n

For better understanding please
check the condition const hasSelected = selectedRowKeys.length > 0; based on it you can track unselected checkboxes

const hasSelected = selectedRowKeys.length > 0;
22%

Note that the currently-selected value is set via the value prop on the parent select element. The initially-selected value is set by the initial state.version value. value props on the child option elements are the potential values to be changed to.,This handler will simply print the new value that the text input is changed to.,The onChange handler will listen for any change to the input and fire an event when the value changes. With a text input field like this, we can pass the onChange prop:

1<label>
2  First name
3  <input
4    type="text"
5    onChange={handleChange}
6  />
7</label>
load more v
60%

When the showSelectAll property is set to true, by default Select All text will show. You can customize the name attribute of the Select All option by using selectAllText.,For the unSelect All option, by default unSelect All text will show. You can customize the name attribute of the unSelect All option by using unSelectAllText.,The MultiSelect component has in-built support to select the all list items using Select All options in the header.

import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {

    // define the JSON of data
    private sportsData: { [key: string]: Object }[] = [
        { Id: 'game1', Game: 'Badminton' },
        { Id: 'game2', Game: 'Football' },
        { Id: 'game3', Game: 'Tennis' },
        { Id: 'game4', Game: 'Golf' },
        { Id: 'game5', Game: 'Cricket' },
        { Id: 'game6', Game: 'Handball' },
        { Id: 'game7', Game: 'Karate' },
        { Id: 'game8', Game: 'Fencing' },
        { Id: 'game9', Game: 'Boxing' }
    ];

    // maps the appropriate column to fields property
    private fields: object = { text: 'Game', value: 'Id' };

    public render() {
        return (
            // specifies the tag for render the MultiSelect component
            <MultiSelectComponent id="checkbox" dataSource={this.sportsData}
                fields={this.fields} placeholder="Select game" mode="CheckBox">
                <Inject services={[CheckBoxSelection]} />
            </MultiSelectComponent>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
load more v
48%

Built-in check box support with a Select All option for easy interactions.,A quick replacement of the HTML select element with multiple selection.,The React MultiSelect Dropdown has built-in filtering support with a rich set of filtering configurations available.

 Pretag team - issue, fix, solve, resolve
23%

© 2020 Tanner Linsley. All rights reserved.,The latest TanStack news, articles, and resources, sent to your inbox.

 Pretag team - issue, fix, solve, resolve

Other "table-checkbox" queries related to "How to sync the antd multiple select table checkbox state with a select option"