Hide the selected row in prime react Datatables

Question

I have the below code which i can select the rows for highlight, but if i want to hide the selected rows from the table below is my code


const [hideEmployeeDialog, setHideEmployeeDialog] = useState(false);

const leftToolbarTemplate = () => {
    return (
        <React.Fragment>
            <Button label="Show" icon="pi pi-plus" className="p-button-success mr-2" />
            <Button label="Hide" icon="pi pi-minus" className="p-button-success mr-2" onClick = {hideSelectedEmployeeDialogue}/>
            <Button label="Delete" icon="pi pi-trash" className="p-button-danger"/>
        </React.Fragment>
    )
}

const hideSelectedEmployeeDialogue = () => {
    setHideEmployeeDialog(true);
}


const hideEmployeeList = [];
const hideSelectedEmployee = () => {
    for (let i = 0; i < selectedEmployee.length; i++) {
        hideEmployeeList.push(selectedEmployee[i].id);
    }
    // hideEmployeeList gettig all the selected row ids to hide
    // But i need to hide these ids from the table
    setHideEmployeeDialog(false);
}


const deleteMultipleEmployeeDialogFooter = (
<React.Fragment>
    <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteEmployeeDialog} />
    <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteMultipleEmployee}/>
</React.Fragment>
);
    

<Toolbar className="mb-4" left={leftToolbarTemplate}></Toolbar>
<DataTable ref={dt} value={rows} selection={selectedEmployee} onSelectionChange={(e) => {setEmployeeDataId(e.value); setSelectedEmployee(e.value);}}
dataKey="id" globalFilter={globalFilter} responsiveLayout="scroll">
<Column selectionMode="multiple" headerStyle={{ width: '2rem' }} exportable={false}></Column>
<Column header="Action" body={actionBodyTemplate} exportable={false} style={{ minWidth: '2rem' }}></Column>
<Column field="name" header="Name" sortable style={{ minWidth: '2rem' }}></Column>
<Column field="workingTime" header="Working Time" sortable style={{ minWidth: '2rem' }}></Column>
</DataTable>
</div>

<Dialog visible={hideEmployeeDialog} style={{ width: '450px' }} header="Confirm" modal footer={hideEmployeeDialogFooter} onHide={hideDeleteEmployeeDialog}>
    <div className="confirmation-content">
        <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
        {employee && <span>Are you sure you want to Hide selected employees<b>{employee.name}</b>?</span>}
    </div>
</Dialog>

When click on the row the given employees row is highlight into the table

But in same case i want to choose multiple rows and make them as hide from table not delete Like 1,2,3,4 are my rows then if am select 1,2 then both rows should be view in disable mode

Hide the selected row in prime react Datatables

0 Answers0