[WIP] - update table component

Author: b-yogesh

chartlets.js/packages/lib/src/plugins/mui/Table.tsx

@@ -8,29 +8,25 @@ import {
   TableRow,
 } from "@mui/material";
 import type { ComponentProps, ComponentState } from "@/index";
+import type { SxProps } from "@mui/system";
 
 interface TableCellProps {
   id: string | number;
-  size?: "medium" | "small" | string;
+  size?: "medium" | "small";
   align?: "inherit" | "left" | "center" | "right" | "justify";
+  padding?: "checkbox" | "none" | "normal";
+  sx?: SxProps;
 }
 
 interface TableColumn extends TableCellProps {
   label: string;
 }
 
-type row = {
-  [key: string]: string | number | boolean | undefined;
-};
-
-interface TableRowData extends TableCellProps {
-  data: row;
-}
-
 interface TableState extends ComponentState {
-  rows?: TableRowData[];
+  rows?: (string | number | boolean | undefined)[][];
   columns?: TableColumn[];
   hover?: boolean;
+  stickyHeader?: boolean;
 }
 
 interface TableProps extends ComponentProps, TableState {}
@@ -42,6 +38,7 @@ export const Table = ({
   rows,
   columns,
   hover,
+  stickyHeader,
   onChange,
 }: TableProps) => {
   if (!columns || columns.length === 0) {
@@ -52,42 +49,83 @@ export const Table = ({
     return <div>No rows provided.</div>;
   }
 
-  const handleRowClick = (row: TableRowData) => {
+  const handleRowClick = (row: (string | number | boolean | undefined)[]) => {
+    const rowData = row.reduce(
+      (acc, cell, cellIndex) => {
+        const columnId = columns[cellIndex]?.id;
+        if (columnId) {
+          acc[columnId] = cell;
+        }
+        return acc;
+      },
+      {} as Record<string, string | number | boolean | undefined>,
+    );
     if (id) {
       onChange({
         componentType: type,
         id: id,
         property: "value",
-        value: row,
+        value: rowData,
       });
     }
   };
 
+  // function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
+  //   if (b[orderBy] < a[orderBy]) {
+  //     return -1;
+  //   }
+  //   if (b[orderBy] > a[orderBy]) {
+  //     return 1;
+  //   }
+  //   return 0;
+  // }
+  //
+  // type Order = "asc" | "desc";
+  //
+  // function getComparator<Key extends keyof any>(
+  //   order: Order,
+  //   orderBy: Key,
+  // ): (
+  //   a: { [key in Key]: number | string },
+  //   b: { [key in Key]: number | string },
+  // ) => number {
+  //   return order === "desc"
+  //     ? (a, b) => descendingComparator(a, b, orderBy)
+  //     : (a, b) => -descendingComparator(a, b, orderBy);
+  // }
+
   return (
-    <TableContainer component={Paper} style={style} id={id}>
-      <MuiTable>
+    <TableContainer component={Paper} sx={style} id={id}>
+      <MuiTable stickyHeader={stickyHeader}>
         <TableHead>
           <TableRow>
             {columns.map((column) => (
-              <TableCell key={column.id} align={column.align || "left"}>
+              <TableCell
+                key={column.id}
+                align={column.align || "inherit"}
+                size={column.size || "medium"}
+                padding={column.padding}
+              >
                 {column.label}
               </TableCell>
             ))}
           </TableRow>
         </TableHead>
         <TableBody>
-          {rows.map((row) => (
+          {rows.map((row, row_index) => (
             <TableRow
               hover={hover}
-              key={row.id}
+              key={row_index}
               onClick={() => handleRowClick(row)}
             >
-              {columns.map((column) => (
+              {row?.map((item, item_index) => (
                 <TableCell
-                  key={`${row.id}-${column.id}`}
-                  align={column.align || "left"}
+                  key={item_index}
+                  align={columns[item_index].align || "inherit"}
+                  size={columns[item_index].size || "medium"}
+                  padding={columns[item_index].padding}
                 >
-                  {row.data[column.id]}
+                  {item}
                 </TableCell>
               ))}
             </TableRow>

chartlets.py/chartlets/components/table.py

@@ -1,5 +1,5 @@
 from dataclasses import dataclass
-from typing import List, Literal, TypedDict, Optional, Dict, Union
+from typing import Literal, TypedDict
 from chartlets import Component
 
 
@@ -15,20 +15,16 @@ class TableCellProps(TypedDict, total=False):
     align: Literal["inherit", "left", "center", "right", "justify"] | None
     """The alignment of the cell content."""
 
+    # sortDirection:
+
 
 class TableColumn(TableCellProps):
     """Defines a column in the table."""
 
     label: str
     """The display label for the column header."""
 
-
-class TableRowData(TableCellProps):
-    """Defines a row in the table."""
-
-    data: dict[str, Union[str, int, float, bool, None]]
-    """The data for the row, as a dictionary where keys are the column ids."""
-
+type TableRow = list[list[str | int | float | bool | None]]
 
 @dataclass(frozen=True)
 class Table(Component):
@@ -37,8 +33,11 @@ class Table(Component):
     columns: list[TableColumn] | None = None
     """The columns to display in the table."""
 
-    rows: list[TableRowData] | None = None
+    rows: TableRow | None = None
     """The rows of data to display in the table."""
 
     hover: bool | None = None
     """A boolean indicating whether to highlight a row when hovered over"""
+
+    stickyHeader: bool | None = None
+    """A boolean to set the header of the table sticky"""

chartlets.py/demo/my_extension/my_panel_6.py

@@ -1,10 +1,10 @@
-from chartlets import Component, Input, State, Output
+from chartlets import Component, Input, Output
 from chartlets.components import Box, Typography, Table
 
 from server.context import Context
 from server.panel import Panel
 
-from chartlets.components.table import TableColumn, TableRowData
+from chartlets.components.table import TableColumn, TableRow
 
 panel = Panel(__name__, title="Panel F")
 
@@ -15,25 +15,21 @@ def render_panel(
     ctx: Context,
 ) -> Component:
     columns: list[TableColumn] = [
-        {"id": "id", "label": "ID"},
-        {"id": "firstName", "label": "First Name", "align": "left"},
+        {"id": "id", "label": "ID", "sortDirection": "desc"},
+        {
+            "id": "firstName",
+            "label": "First Name",
+            "align": "left",
+            "sortDirection": "desc",
+        },
         {"id": "lastName", "label": "Last Name", "align": "center"},
         {"id": "age", "label": "Age"},
     ]
 
-    rows: list[TableRowData] = [
-        {
-            "id": 1,
-            "data": {"id": "1", "firstName": "John", "lastName": "Doe", "age": 30},
-        },
-        {
-            "id": 2,
-            "data": {"id": "2", "firstName": "Jane", "lastName": "Smith", "age": 25},
-        },
-        {
-            "id": 3,
-            "data": {"id": "3", "firstName": "Peter", "lastName": "Jones", "age": 40},
-        },
+    rows: TableRow = [
+        ["1", "John", "Doe", 30],
+        ["2", "Jane", "Smith", 25],
+        ["3", "Peter", "Jones", 40],
     ]
 
     table = Table(id="table", rows=rows, columns=columns, hover=True)

chartlets.py/tests/components/table_test.py

@@ -1,4 +1,4 @@
-from chartlets.components.table import TableColumn, TableRowData, Table
+from chartlets.components.table import TableColumn, Table, TableRow
 from tests.component_test import make_base
 
 
@@ -18,13 +18,10 @@ def test_is_json_serializable_empty(self):
             {"id": "lastName", "label": "Last Name"},
             {"id": "age", "label": "Age"},
         ]
-        rows: list[TableRowData] = [
-            {
-                "id": "1",
-                "data": {"firstName": "John", "lastName": "Doe", "age": 30},
-            },
-            {"id": "2", "data": {"firstName": "Jane", "lastName": "Smith", "age": 25}},
-            {"id": 3, "data": {"firstName": "Johnie", "lastName": "Undoe", "age": 40}},
+        rows: TableRow = [
+            ["John", "Doe", 30],
+            ["Jane", "Smith", 25],
+            ["Johnie", "Undoe", 40],
         ]
         hover: bool = True
         style = {"background-color": "lightgray", "width": "100%"}