adding table rowexpander example

src/components/content/examples/collection/data/projectData.json

@@ -0,0 +1,195 @@
+[
+  {
+    "id": "t1",
+    "name": "Task 1",
+    "resource": "Larry",
+    "start": "1/1/2014",
+    "end": "10/1/2014",
+    "children": [
+      {
+        "id": "t1:1",
+        "name": "Task 1-1",
+        "resource": "Larry",
+        "start": "1/1/2014",
+        "end": "3/1/2014",
+        "children": [
+          {
+            "id": "t1:1:1",
+            "name": "Task 1-1-1",
+            "resource": "Larry",
+            "start": "1/1/2014",
+            "end": "2/1/2014"
+          },
+          {
+            "id": "t1:1:2",
+            "name": "Task 1-1-2",
+            "resource": "Larry",
+            "start": "2/1/2014",
+            "end": "3/1/2014"
+          }
+        ]
+      },
+      {
+        "id": "t1:2",
+        "name": "Task 1-2",
+        "resource": "Larry",
+        "start": "3/1/2014",
+        "end": "6/1/2014",
+        "children": [
+          {
+            "id": "t1:2:1",
+            "name": "Task 1-2-1",
+            "resource": "Larry",
+            "start": "3/1/2014",
+            "end": "5/1/2014"
+          },
+          {
+            "id": "t1:2:2",
+            "name": "Task 1-2-2",
+            "resource": "Larry",
+            "start": "5/1/2014",
+            "end": "6/1/2014"
+          }
+        ]
+      },
+      {
+        "id": "t1:3",
+        "name": "Task 1-3",
+        "resource": "Larry",
+        "start": "6/1/2014",
+        "end": "8/1/2014"
+      },
+      {
+        "id": "t1:4",
+        "name": "Task 1-4",
+        "resource": "Larry",
+        "start": "8/1/2014",
+        "end": "10/1/2014"
+      }
+    ]
+  },
+  {
+    "id": "t2",
+    "name": "Task 2",
+    "resource": "Larry",
+    "start": "4/1/2014",
+    "end": "12/1/2014",
+    "children": [
+      {
+        "id": "t2:1",
+        "name": "Task 2-1",
+        "resource": "Larry",
+        "start": "4/1/2014",
+        "end": "5/1/2014"
+      },
+      {
+        "id": "t2:2",
+        "name": "Task 2-2",
+        "resource": "Larry",
+        "start": "5/1/2014",
+        "end": "8/1/2014",
+        "children": [
+          {
+            "id": "t2:2:1",
+            "name": "Task 2-2-1",
+            "resource": "Larry",
+            "start": "5/1/2014",
+            "end": "7/1/2014"
+          },
+          {
+            "id": "t2:2:2",
+            "name": "Task 2-2-2",
+            "resource": "Larry",
+            "start": "7/1/2014",
+            "end": "8/1/2014"
+          }
+        ]
+      },
+      {
+        "id": "t2:3",
+        "name": "Task 2-3",
+        "resource": "Larry",
+        "start": "8/1/2014",
+        "end": "12/1/2014",
+        "children": [
+          {
+            "id": "t2:3:1",
+            "name": "Task 2-3-1",
+            "resource": "Larry",
+            "start": "8/1/2014",
+            "end": "11/1/2014",
+            "children": [
+              {
+                "id": "t2:3:1:1",
+                "name": "Task 2-3-1-1",
+                "resource": "Larry",
+                "start": "8/1/2014",
+                "end": "9/1/2014"
+              },
+              {
+                "id": "t2:3:1:2",
+                "name": "Task 2-3-1-2",
+                "resource": "Larry",
+                "start": "9/1/2014",
+                "end": "11/1/2014"
+              }
+            ]
+          },
+          {
+            "id": "t2:3:2",
+            "name": "Task 2-3-2",
+            "resource": "Larry",
+            "start": "11/1/2014",
+            "end": "12/1/2014"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "t3",
+    "name": "Task 3",
+    "resource": "Larry",
+    "start": "5/1/2014",
+    "end": "11/1/2014",
+    "children": [
+      {
+        "id": "t3:1",
+        "name": "Task 3-1",
+        "resource": "Larry",
+        "start": "5/1/2014",
+        "end": "8/1/2014",
+        "children": [
+          {
+            "id": "t3:1:1",
+            "name": "Task 3-1-1",
+            "resource": "Larry",
+            "start": "5/1/2014",
+            "end": "6/1/2014"
+          },
+          {
+            "id": "t3:1:2",
+            "name": "Task 3-1-2",
+            "resource": "Larry",
+            "start": "6/1/2014",
+            "end": "8/1/2014"
+          }
+        ]
+      },
+      {
+        "id": "t3:2",
+        "name": "Task 3-2",
+        "resource": "Larry",
+        "start": "8/1/2014",
+        "end": "11/1/2014"
+      }
+    ]
+  },
+  {
+    "id": "t4",
+    "name": "Task 4",
+    "resource": "Larry",
+    "start": "11/1/2014",
+    "end": "12/1/2014"
+  }
+]

src/components/content/examples/collection/index.tsx

@@ -3,6 +3,7 @@ import GroupByTable from "./group-by-table";
 import Treeview from "./treeview";
 import ListView from "./listview";
 import DataGrid from "./datagrid";
+import { RowExpanderTable } from "./rowexpander-table";
 import "preact";
 
 const Collection = () => {
@@ -29,6 +30,10 @@ const Collection = () => {
           <h2 class="oj-typography-heading-sm"> Group By Table </h2>
           <GroupByTable />
         </div>
+        <div class="oj-flex-item oj-panel oj-sm-margin-2x demo-panel-xl">
+          <h2 class="oj-typography-heading-sm"> Row Expander Table </h2>
+          <RowExpanderTable />
+        </div>
       </div>
     </div>
   );

src/components/content/examples/collection/rowexpander-table.tsx

@@ -0,0 +1,98 @@
+import { ComponentProps } from "preact";
+import "ojs/ojrowexpander";
+import "ojs/ojtable";
+import { ojTable } from "ojs/ojtable";
+import * as jsonDataStr from "text!./data/projectData.json";
+import { MutableArrayTreeDataProvider } from "ojs/ojmutablearraytreedataprovider";
+import FlattenedTreeDataProviderView = require("ojs/ojflattenedtreedataproviderview");
+
+type TableRow = {
+  id: string;
+  name: string;
+  resource: string;
+  start: string;
+  end: string;
+};
+
+type TableProps = ComponentProps<"oj-table">;
+
+const setSelectionMode: TableProps["selectionMode"] = {
+  row: "single",
+  column: "none",
+};
+
+export const RowExpanderTable = () => {
+  const arrayTreeDataProvider = new FlattenedTreeDataProviderView(
+    new MutableArrayTreeDataProvider(JSON.parse(jsonDataStr), "id", {
+      keyAttributeScope: "global",
+    })
+  );
+
+  const columns = [
+    {
+      headerText: "Task Name",
+      sortProperty: "name",
+      weight: 2,
+      minWidth: "13rem",
+      id: "name",
+    },
+    {
+      headerText: "Resource",
+      sortProperty: "resource",
+      minWidth: "9rem",
+      id: "resource",
+    },
+    {
+      headerText: "Start Date",
+      sortProperty: "start",
+      minWidth: "8rem",
+      id: "start",
+    },
+    {
+      headerText: "End Date",
+      sortProperty: "end",
+      minWidth: "8rem",
+      id: "end",
+    },
+  ];
+
+  const rowTemplate = (
+    row: ojTable.RowTemplateContext<TableRow["id"], TableRow>
+  ) => {
+    return (
+      <tr>
+        <td>
+          <oj-row-expander
+            data-oj-clickthrough={"disabled"}
+            context={row}
+          ></oj-row-expander>
+          <span>{row.item.data.name}</span>
+        </td>
+        <td>
+          <span>{row.item.data.resource}</span>
+        </td>
+        <td>
+          <span>{row.item.data.start}</span>
+        </td>
+        <td>
+          <span>{row.item.data.end}</span>
+        </td>
+      </tr>
+    );
+  };
+
+  return (
+    <div>
+      <oj-table
+        id="table"
+        aria-label="Project tasks"
+        selectionMode={setSelectionMode}
+        data={arrayTreeDataProvider}
+        columns={columns}
+        class="table-sizing"
+      >
+        <template slot="rowTemplate" render={rowTemplate} />
+      </oj-table>
+    </div>
+  );
+};