mardi 8 juin 2021

Unable to make checkbox selection for all in React Table

This my code for single selection and single unselection

    const singleSelection = (leadId, e) => {
        if (e.target.checked) {
            let selectedAll = true;
            const checkedItemsCopy = [...checkedItems, leadId];
            data.map((ids) => ids.id).forEach((id) => {
                if (!checkedItemsCopy.includes(id)) {
                    selectedAll = false;
                }
            });
            setCheckedItems([...checkedItemsCopy]);
            if (selectedAll) {
                setIsSelectedAll((prev) => {
                    return { ...prev, [pagination.page]: 1 };
                });
            }
        } else {
            const checkedItemsCopy = checkedItems.filter((item) => item !== leadId);
            setCheckedItems([...checkedItemsCopy]);
            setIsSelectedAll((prev) => {
                return { ...prev, [pagination.page]: 0 };
            });
        }
    };

This is code for single page selection and single page unselection

     const selectAll = (e) => {
            if (e.target.checked) {
                const dataIds = data.map((a) => a.id);
                const filteredIds = dataIds.filter((id) => !checkedItems.includes(id));
                const checkedItemsCopy = [...checkedItems].concat(filteredIds);
                setCheckedItems([...checkedItemsCopy]);
                setIsSelectedAll((prev) => {
                    return { ...prev, [pagination.page]: 1 };
                });
            } else {
                const dataId = data.map((a) => a.id);
                const checkedItemsCopy = [...checkedItems].filter(
                    (prevSelected) => !dataId.includes(prevSelected),
                );
                setCheckedItems([...checkedItemsCopy]);
                setIsSelectedAll((prev) => {
                    return { ...prev, [pagination.page]: 0 };
                });
            }
        };

this is my table data which has setting true or false o.isSelected

      var result = data?.map(function (el) {
            var o = Object.assign({}, el);
            o.isSelected = checkedItems.includes(o?.id);
            return o;
        });

here I am setting each page header check box true or false

     let checkAllBoxResult =
            isSelectedAll[pagination.page] !== undefined ? isSelectedAll[pagination.page] : false;

This is my table.

<Table
dataList={result || []}
columns={columns}
pagination=
onPaginationChange={setPagination}
selectAll={selectAll}
singleSelection={singleSelection}
checkAllBox={checkAllBoxResult}
/>

now I need to Implement selection in all pages .Unable to implement this can someone give suggestions for implementing this.




Aucun commentaire:

Enregistrer un commentaire