如何在带有react-data-grid的复选框列上全选?

时间:2019-07-10 19:37:46

标签: reactjs react-data-grid

我有一个react-data-grid,其中每个单元格都包含一个复选框,每个列名称旁边都有一个复选框。当我单击列名称旁边的复选框时,我要检查与该列对应的所有复选框。这可能吗?

let finalNotifications = [];
 finalNotifications.push({
                Domain: "Domain Name",
                Types: "Type Name",
                Email: <input type={"checkbox"}/>,
                Text: <input type={"checkbox"}/>,
                Phone: <input type={"checkbox"}/>
            })
const detailColumns = [
{key: "Domain", name: "Domain"},
{key: 'Types', name: 'Message Name'},
{key: 'Email', name: <div>Email <input type={"checkbox"} onClick={}/></div>},
{key: 'Text', name:  <div>Text <input type={"checkbox"} onClick={}/></div>},
{key: 'Phone', name:  <div>Phone <input type={"checkbox"} onClick={}/></div>}

];

this.setState({notifications: finalNotifications});
notificationRows = this.state.notifications;


<ReactDataGrid
    title={false}
    columns={detailColumns}
    rowGetter={i => notificationRows[i]}
    rowsCount={5}
    minHeight={150}/>;

1 个答案:

答案 0 :(得分:0)

您应该查看他们的文档。这应该有所帮助。 https://adazzle.github.io/react-data-grid/docs/examples/row-selection