nextui/apps/docs/content/components/table/disabled-rows.ts
2023-07-12 21:52:32 -03:00

77 lines
1.5 KiB
TypeScript

const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue} from "@nextui-org/react";
const rows = [
{
key: "1",
name: "Tony Reichert",
role: "CEO",
status: "Active",
},
{
key: "2",
name: "Zoey Lang",
role: "Technical Lead",
status: "Paused",
},
{
key: "3",
name: "Jane Fisher",
role: "Senior Developer",
status: "Active",
},
{
key: "4",
name: "William Howard",
role: "Community Manager",
status: "Vacation",
},
];
const columns = [
{
key: "name",
label: "NAME",
},
{
key: "role",
label: "ROLE",
},
{
key: "status",
label: "STATUS",
},
];
export default function App() {
const [selectedKeys, setSelectedKeys] = React.useState(new Set(["2"]));
return (
<Table
aria-label="Controlled table example with dynamic content"
selectionMode="multiple"
disabledKeys={["3", "4"]}
selectedKeys={selectedKeys}
onSelectionChange={setSelectedKeys}
>
<TableHeader columns={columns}>
{(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
</TableHeader>
<TableBody items={rows}>
{(item) => (
<TableRow key={item.key}>
{(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
</TableRow>
)}
</TableBody>
</Table>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};