Mastering Row Selection in NextUI Table: A Comprehensive Guide
The Challenge: Selecting specific rows from a NextUI Table can be a common requirement in web applications. Users need the ability to highlight or choose particular rows for further action, whether it's editing, deleting, or exporting data. This article will guide you through the process of implementing row selection effectively using NextUI Table.
Scenario: Imagine you're building a customer management system. You need to display a list of customers in a table and allow users to select multiple customers for bulk actions like sending email campaigns or applying discounts.
Original Code (Without Selection):
import { Table } from 'nextui-org/table';
const customers = [
{ id: 1, name: 'Alice', email: '[email protected]' },
{ id: 2, name: 'Bob', email: '[email protected]' },
{ id: 3, name: 'Charlie', email: '[email protected]' },
];
export default function CustomerList() {
return (
<Table>
<Table.Header>
<Table.Column>Name</Table.Column>
<Table.Column>Email</Table.Column>
</Table.Header>
<Table.Body>
{customers.map((customer) => (
<Table.Row key={customer.id}>
<Table.Cell>{customer.name}</Table.Cell>
<Table.Cell>{customer.email}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
);
}
Enabling Row Selection:
-
The
selectionProp: NextUI Table provides aselectionprop to enable row selection functionality. This prop accepts an object with various configurations. -
selectedKeys&onSelectionChange: These two properties are crucial for managing row selection.selectedKeysholds an array of the selected rows' unique identifiers (e.g., customer IDs).onSelectionChangeis a callback function triggered whenever the selection changes, allowing you to update your application state.
Modified Code:
import { useState } from 'react';
import { Table } from 'nextui-org/table';
const customers = [
{ id: 1, name: 'Alice', email: '[email protected]' },
{ id: 2, name: 'Bob', email: '[email protected]' },
{ id: 3, name: 'Charlie', email: '[email protected]' },
];
export default function CustomerList() {
const [selectedKeys, setSelectedKeys] = useState([]);
const handleSelectionChange = (keys) => {
setSelectedKeys(keys);
console.log('Selected Keys:', keys); // Update your application state or perform actions here
};
return (
<Table
selection={{
selectedKeys,
onSelectionChange: handleSelectionChange,
}}
>
{/* ...Table Header and Body components remain the same */}
</Table>
);
}
Enhancements and Customization:
-
Multiple Selection: By default, NextUI Table allows for multiple row selections. You can disable this by setting
multipletofalseinside theselectionobject. -
Custom Styling: You can style selected rows using the
selectedRowStyleproperty within theselectionobject. This allows you to apply different colors, borders, or background styles to highlight selected rows. -
Selection Modes: NextUI Table offers two selection modes:
checkboxandrow. Thecheckboxmode displays checkboxes next to each row for explicit selection. Therowmode allows users to select rows by clicking on them directly. -
Custom Actions: After selecting rows, you can integrate custom actions like deleting selected rows, editing selected data, or performing any other relevant operation based on your application's requirements.
Conclusion: Row selection is an integral part of many data-driven applications. NextUI Table provides a convenient and flexible way to implement this feature with minimal code. By understanding the selection prop and its options, you can create a robust and user-friendly experience for managing data in your applications.
Resources:
- NextUI Table Documentation: https://nextui-org.vercel.app/docs/components/table
- NextUI Website: https://nextui.org
This article has provided a detailed guide to implementing row selection in NextUI Table, empowering you to enhance user interaction and functionality within your data-driven applications.
