docs(table): include TS examples to show Selection type usage (#4793)

Author: wingkwong

apps/docs/content/components/table/controlled-selection.raw.tsx

@@ -0,0 +1,78 @@
+import type {Selection} from "@heroui/react";
+
+import React from "react";
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  getKeyValue,
+} from "@heroui/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<Selection>(new Set(["2"]));
+
+  return (
+    <Table
+      aria-label="Controlled table example with dynamic content"
+      selectedKeys={selectedKeys}
+      selectionMode="multiple"
+      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>
+  );
+}

apps/docs/content/components/table/controlled-selection.ts

@@ -1,7 +1,9 @@
 import App from "./controlled-selection.raw.jsx?raw";
+import AppTs from "./controlled-selection.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+  "/App.tsx": AppTs,
 };
 
 export default {

apps/docs/content/components/table/disabled-rows.raw.tsx

@@ -0,0 +1,79 @@
+import type {Selection} from "@heroui/react";
+
+import React from "react";
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  getKeyValue,
+} from "@heroui/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<Selection>(new Set(["2"]));
+
+  return (
+    <Table
+      aria-label="Controlled table example with dynamic content"
+      disabledKeys={["3", "4"]}
+      selectedKeys={selectedKeys}
+      selectionMode="multiple"
+      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>
+  );
+}

apps/docs/content/components/table/disabled-rows.ts

@@ -1,7 +1,9 @@
 import App from "./disabled-rows.raw.jsx?raw";
+import AppTs from "./disabled-rows.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+  "/App.tsx": AppTs,
 };
 
 export default {