Interactive Primereact Datatable

[Amit-ga]

Hello,
Is there any way for the user to add and remove rows interactively from the table?
I have not found it in the documentation.

Thanks.

[qwadrox]

@Amit-ga
Hi. The ability to add and remove rows interactively isn't explicitly mentioned in the documentation because it would be only basic React state management.

const [data, setData] = useState([
        { id: 1, name: 'Product A', price: 100 },
        { id: 2, name: 'Product B', price: 200 },
    ]);

const addRow = () => {
    const newId = data.length > 0 ? Math.max(...data.map(d => d.id)) + 1 : 1;
    // The DataTable would re-render after this and display the new data
    setData([...data, { id: newId, name: `New Product ${newId}`, price: 0 }]);
};

const removeRow = (rowData) => {
    setData(data.filter(d => d.id !== rowData.id));
};

// You can customize this further based on your specific needs.
// For instance, you might want to add a delete button on the row: 
const actionTemplate = (rowData) => {
    return <Button icon="pi pi-trash" onClick={() => removeRow(rowData)} />;
};

return (
    <div>
        <Button label="Add Row" icon="pi pi-plus" onClick={addRow} style={{ marginBottom: '10px' }} />
        <DataTable value={data}>
            <Column field="id" header="ID" />
            <Column field="name" header="Name" />
            <Column field="price" header="Price" />
            <Column body={actionTemplate} header="Actions" />
        </DataTable>
    </div>
);

However, you can find examples for such: https://primereact.org/datatable/#dtproducts. In this example, user can add new product on a dialog or remove with the delete button after selecting the row.
If you want to further enhance interactivity and want to allow users to interact with the data directly "from the table" you might want to consider using editMode: https://primereact.org/datatable/#edit
In summary, you can use buttons, dialogs or the editMode to make adding and removing (updating) rows interactively.

Is this what you're looking for?