From 21bd665251eb21b6c8b51bf88efd0d23ee3048ec Mon Sep 17 00:00:00 2001 From: Yogesh Kumar Baljeet Singh Date: Fri, 27 Dec 2024 14:58:23 +0100 Subject: [PATCH 01/13] Implement Table.tsx --- .../packages/lib/src/plugins/mui/Table.tsx | 99 +++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 chartlets.js/packages/lib/src/plugins/mui/Table.tsx diff --git a/chartlets.js/packages/lib/src/plugins/mui/Table.tsx b/chartlets.js/packages/lib/src/plugins/mui/Table.tsx new file mode 100644 index 00000000..bc72d2b4 --- /dev/null +++ b/chartlets.js/packages/lib/src/plugins/mui/Table.tsx @@ -0,0 +1,99 @@ +import { + Paper, + Table as MuiTable, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from "@mui/material"; +import type { ComponentProps, ComponentState } from "@/index"; + +interface TableCellProps { + id: string | number; + size?: "medium" | "small" | string; + align?: "inherit" | "left" | "center" | "right" | "justify"; +} + +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[]; + columns?: TableColumn[]; + hover?: boolean; +} + +interface TableProps extends ComponentProps, TableState {} + +export const Table = ({ + type, + id, + style, + rows, + columns, + hover, + onChange, +}: TableProps) => { + if (!columns || columns.length === 0) { + return
No columns provided.
; + } + + if (!rows || rows.length === 0) { + return
No rows provided.
; + } + + const handleRowClick = (row: TableRowData) => { + if (id) { + onChange({ + componentType: type, + id: id, + property: "value", + value: row, + }); + } + }; + + return ( + + + + + {columns.map((column) => ( + + {column.label} + + ))} + + + + {rows.map((row) => ( + handleRowClick(row)} + > + {columns.map((column) => ( + + {row.data[column.id]} + + ))} + + ))} + + + + ); +}; From dfc8c9e5ac5693267fe9d9fe33d279274c4bd96f Mon Sep 17 00:00:00 2001 From: Yogesh Kumar Baljeet Singh Date: Fri, 27 Dec 2024 14:59:06 +0100 Subject: [PATCH 02/13] Implement table.py --- chartlets.py/chartlets/components/table.py | 44 ++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 chartlets.py/chartlets/components/table.py diff --git a/chartlets.py/chartlets/components/table.py b/chartlets.py/chartlets/components/table.py new file mode 100644 index 00000000..08eb8cba --- /dev/null +++ b/chartlets.py/chartlets/components/table.py @@ -0,0 +1,44 @@ +from dataclasses import dataclass +from typing import List, Literal, TypedDict, Optional, Dict, Union +from chartlets import Component + + +class TableCellProps(TypedDict, total=False): + """Represents common properties of a table cell.""" + + id: str | int | float + """The unique identifier for the cell.""" + + size: Literal['medium', 'small'] | str | None + """The size of the cell.""" + + align: Literal["inherit", "left", "center", "right", "justify"] | None + """The alignment of the cell content.""" + + +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.""" + + +@dataclass(frozen=True) +class Table(Component): + """A basic Table with configurable rows and columns.""" + + columns: list[TableColumn] | None = None + """The columns to display in the table.""" + + rows: list[TableRowData] | 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""" From 1725a21c56744843b0a125252da238568464aa29 Mon Sep 17 00:00:00 2001 From: Yogesh Kumar Baljeet Singh Date: Fri, 27 Dec 2024 14:59:46 +0100 Subject: [PATCH 03/13] add table --- chartlets.js/packages/lib/src/plugins/mui/index.ts | 2 ++ chartlets.py/chartlets/components/__init__.py | 1 + 2 files changed, 3 insertions(+) diff --git a/chartlets.js/packages/lib/src/plugins/mui/index.ts b/chartlets.js/packages/lib/src/plugins/mui/index.ts index f59a71ca..d77735b2 100644 --- a/chartlets.js/packages/lib/src/plugins/mui/index.ts +++ b/chartlets.js/packages/lib/src/plugins/mui/index.ts @@ -11,6 +11,7 @@ import { Switch } from "./Switch"; import { Tabs } from "./Tabs"; import { Typography } from "./Typography"; import { Slider } from "./Slider"; +import { Table } from "@/plugins/mui/Table"; export default function mui(): Plugin { return { @@ -25,6 +26,7 @@ export default function mui(): Plugin { ["Select", Select], ["Slider", Slider], ["Switch", Switch], + ["Table", Table], ["Tabs", Tabs], ["Typography", Typography], ], diff --git a/chartlets.py/chartlets/components/__init__.py b/chartlets.py/chartlets/components/__init__.py index 615d95c0..82283ff0 100644 --- a/chartlets.py/chartlets/components/__init__.py +++ b/chartlets.py/chartlets/components/__init__.py @@ -12,6 +12,7 @@ from .select import Select from .slider import Slider from .switch import Switch +from .table import Table from .tabs import Tab from .tabs import Tabs from .typography import Typography From 86bee36ea4551233872567c4c64cde794d31b435 Mon Sep 17 00:00:00 2001 From: Yogesh Kumar Baljeet Singh Date: Fri, 27 Dec 2024 15:00:52 +0100 Subject: [PATCH 04/13] add tests --- .../lib/src/plugins/mui/Table.test.tsx | 80 +++++++++++++++++++ chartlets.py/tests/components/table_test.py | 41 ++++++++++ 2 files changed, 121 insertions(+) create mode 100644 chartlets.js/packages/lib/src/plugins/mui/Table.test.tsx create mode 100644 chartlets.py/tests/components/table_test.py diff --git a/chartlets.js/packages/lib/src/plugins/mui/Table.test.tsx b/chartlets.js/packages/lib/src/plugins/mui/Table.test.tsx new file mode 100644 index 00000000..13e85685 --- /dev/null +++ b/chartlets.js/packages/lib/src/plugins/mui/Table.test.tsx @@ -0,0 +1,80 @@ +import { describe, expect, it } from "vitest"; +import { fireEvent, render, screen } from "@testing-library/react"; +import "@testing-library/jest-dom"; +import { Table } from "@/plugins/mui/Table"; +import { createChangeHandler } from "@/plugins/mui/common.test"; + +describe("Table", () => { + const rows = [ + { id: 1, data: { firstName: "John", lastName: "Doe" } }, + { id: 2, data: { firstName: "Johnie", lastName: "Undoe" } }, + ]; + const columns = [ + { id: "firstName", label: "First Name" }, + { id: "lastName", label: "Last Name" }, + ]; + + it("should render the Table component", () => { + render( + {}} + />, + ); + + const table = screen.getByRole("table"); + expect(table).toBeDefined(); + columns.forEach((column) => { + expect(screen.getByText(column.label)).toBeInTheDocument(); + }); + rows.forEach((row) => { + expect(screen.getByText(row.data.firstName)).toBeInTheDocument(); + expect(screen.getByText(row.data.lastName)).toBeInTheDocument(); + }); + }); + + it("should not render the Table component when no columns provided", () => { + render(
{}} />); + + const table = screen.queryByRole("table"); + expect(table).toBeNull(); + }); + + it("should not render the Table component when no rows provided", () => { + render(
{}} />); + + const table = screen.queryByRole("table"); + expect(table).toBeNull(); + }); + + it("should call onChange on row click", () => { + const { recordedEvents, onChange } = createChangeHandler(); + render( +
, + ); + + fireEvent.click(screen.getAllByRole("row")[1]); + expect(recordedEvents.length).toEqual(1); + expect(recordedEvents[0]).toEqual({ + componentType: "Table", + id: "table", + property: "value", + value: { + id: 1, + data: { + firstName: "John", + lastName: "Doe", + }, + }, + }); + }); +}); diff --git a/chartlets.py/tests/components/table_test.py b/chartlets.py/tests/components/table_test.py new file mode 100644 index 00000000..d424c525 --- /dev/null +++ b/chartlets.py/tests/components/table_test.py @@ -0,0 +1,41 @@ +from chartlets.components.table import TableColumn, TableRowData, Table +from tests.component_test import make_base + + +class TableTest(make_base(Table)): + + def test_is_json_serializable_empty(self): + self.assert_is_json_serializable( + self.cls(), + { + "type": "Table", + }, + ) + + columns: list[TableColumn] = [ + {"id": "id", "label": "ID"}, + {"id": "firstName", "label": "First Name"}, + {"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}}, + ] + hover: bool = True + style = {"background-color": "lightgray", "width": "100%"} + + self.assert_is_json_serializable( + self.cls(columns=columns, rows=rows, style=style, hover=hover), + { + "type": "Table", + "columns": columns, + "rows": rows, + "style": style, + "hover": hover, + }, + ) From c4bea3245ed46f48cfd9cdba405f72980247a01e Mon Sep 17 00:00:00 2001 From: Yogesh Kumar Baljeet Singh Date: Fri, 27 Dec 2024 15:01:16 +0100 Subject: [PATCH 05/13] add demo --- chartlets.py/demo/my_extension/__init__.py | 2 + chartlets.py/demo/my_extension/my_panel_6.py | 62 ++++++++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 chartlets.py/demo/my_extension/my_panel_6.py diff --git a/chartlets.py/demo/my_extension/__init__.py b/chartlets.py/demo/my_extension/__init__.py index 0f969eeb..feef3cb7 100644 --- a/chartlets.py/demo/my_extension/__init__.py +++ b/chartlets.py/demo/my_extension/__init__.py @@ -3,9 +3,11 @@ from .my_panel_2 import panel as my_panel_2 from .my_panel_3 import panel as my_panel_3 from .my_panel_4 import panel as my_panel_4 +from .my_panel_6 import panel as my_panel_6 ext = Extension(__name__) ext.add(my_panel_1) ext.add(my_panel_2) ext.add(my_panel_3) ext.add(my_panel_4) +ext.add(my_panel_6) diff --git a/chartlets.py/demo/my_extension/my_panel_6.py b/chartlets.py/demo/my_extension/my_panel_6.py new file mode 100644 index 00000000..bc18c69b --- /dev/null +++ b/chartlets.py/demo/my_extension/my_panel_6.py @@ -0,0 +1,62 @@ +from chartlets import Component, Input, State, 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 + +panel = Panel(__name__, title="Panel F") + + +# noinspection PyUnusedLocal +@panel.layout() +def render_panel( + ctx: Context, +) -> Component: + columns: list[TableColumn] = [ + {"id": "id", "label": "ID"}, + {"id": "firstName", "label": "First Name", "align": "left"}, + {"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}, + }, + ] + + table = Table(id="table", rows=rows, columns=columns, hover=True) + + title_text = Typography(id="title_text", children=["Basic Table"]) + info_text = Typography(id="info_text", children=["Click on any row."]) + + return Box( + style={ + "display": "flex", + "flexDirection": "column", + "width": "100%", + "height": "100%", + "gap": "6px", + }, + children=[title_text, table, info_text], + ) + + +# noinspection PyUnusedLocal +@panel.callback(Input("table"), Output("info_text", "children")) +def update_info_text( + ctx: Context, + table_row: int, +) -> list[str]: + return [f"The clicked row value is {table_row}."] From 5e14f953907f9bd253c371e20ac38e25f122ac3a Mon Sep 17 00:00:00 2001 From: Yogesh Kumar Baljeet Singh Date: Fri, 27 Dec 2024 15:01:29 +0100 Subject: [PATCH 06/13] update CHANGES.md --- chartlets.js/CHANGES.md | 1 + chartlets.py/CHANGES.md | 1 + 2 files changed, 2 insertions(+) diff --git a/chartlets.js/CHANGES.md b/chartlets.js/CHANGES.md index 7e5fd11f..2d069dd8 100644 --- a/chartlets.js/CHANGES.md +++ b/chartlets.js/CHANGES.md @@ -43,6 +43,7 @@ - `Switch` - `Tabs` - `Slider` + - `Table` * Supporting `tooltip` property for interactive MUI components. diff --git a/chartlets.py/CHANGES.md b/chartlets.py/CHANGES.md index 6dd0fc46..28d03374 100644 --- a/chartlets.py/CHANGES.md +++ b/chartlets.py/CHANGES.md @@ -23,6 +23,7 @@ - `RadioGroup` and `Radio` - `Tabs` - `Slider` + - `Table` ## Version 0.0.29 (from 2024/11/26) From 62aac2584d2946f448d2583cd375376ae01ecec9 Mon Sep 17 00:00:00 2001 From: Yogesh Kumar Baljeet Singh Date: Tue, 25 Feb 2025 17:38:01 +0100 Subject: [PATCH 07/13] [WIP] - update table component --- .../packages/lib/src/plugins/mui/Table.tsx | 80 ++++++++++++++----- chartlets.py/chartlets/components/table.py | 17 ++-- chartlets.py/demo/my_extension/my_panel_6.py | 30 +++---- chartlets.py/tests/components/table_test.py | 13 ++- 4 files changed, 85 insertions(+), 55 deletions(-) diff --git a/chartlets.js/packages/lib/src/plugins/mui/Table.tsx b/chartlets.js/packages/lib/src/plugins/mui/Table.tsx index bc72d2b4..928ed3c0 100644 --- a/chartlets.js/packages/lib/src/plugins/mui/Table.tsx +++ b/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
No rows provided.
; } - 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, + ); if (id) { onChange({ componentType: type, id: id, property: "value", - value: row, + value: rowData, }); } }; + // function descendingComparator(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( + // 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 ( - - + + {columns.map((column) => ( - + {column.label} ))} - {rows.map((row) => ( + {rows.map((row, row_index) => ( handleRowClick(row)} > - {columns.map((column) => ( + {row?.map((item, item_index) => ( - {row.data[column.id]} + {item} ))} diff --git a/chartlets.py/chartlets/components/table.py b/chartlets.py/chartlets/components/table.py index 08eb8cba..deecf7fc 100644 --- a/chartlets.py/chartlets/components/table.py +++ b/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,6 +15,8 @@ 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.""" @@ -22,13 +24,7 @@ class TableColumn(TableCellProps): 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""" diff --git a/chartlets.py/demo/my_extension/my_panel_6.py b/chartlets.py/demo/my_extension/my_panel_6.py index bc18c69b..7622c678 100644 --- a/chartlets.py/demo/my_extension/my_panel_6.py +++ b/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) diff --git a/chartlets.py/tests/components/table_test.py b/chartlets.py/tests/components/table_test.py index d424c525..0248c39e 100644 --- a/chartlets.py/tests/components/table_test.py +++ b/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%"} From fd0d6e4db92cb8c3448fe9056c851677835c147e Mon Sep 17 00:00:00 2001 From: Yogesh Kumar Baljeet Singh Date: Wed, 26 Feb 2025 09:59:13 +0100 Subject: [PATCH 08/13] Finish update table component --- .../lib/src/plugins/mui/Table.test.tsx | 16 +++++------ .../packages/lib/src/plugins/mui/Table.tsx | 27 ------------------- chartlets.py/chartlets/components/table.py | 4 +-- 3 files changed, 8 insertions(+), 39 deletions(-) diff --git a/chartlets.js/packages/lib/src/plugins/mui/Table.test.tsx b/chartlets.js/packages/lib/src/plugins/mui/Table.test.tsx index 13e85685..e196d301 100644 --- a/chartlets.js/packages/lib/src/plugins/mui/Table.test.tsx +++ b/chartlets.js/packages/lib/src/plugins/mui/Table.test.tsx @@ -6,8 +6,8 @@ import { createChangeHandler } from "@/plugins/mui/common.test"; describe("Table", () => { const rows = [ - { id: 1, data: { firstName: "John", lastName: "Doe" } }, - { id: 2, data: { firstName: "Johnie", lastName: "Undoe" } }, + ["John", "Doe"], + ["Johnie", "Undoe"], ]; const columns = [ { id: "firstName", label: "First Name" }, @@ -30,9 +30,8 @@ describe("Table", () => { columns.forEach((column) => { expect(screen.getByText(column.label)).toBeInTheDocument(); }); - rows.forEach((row) => { - expect(screen.getByText(row.data.firstName)).toBeInTheDocument(); - expect(screen.getByText(row.data.lastName)).toBeInTheDocument(); + rows.forEach((row, index) => { + expect(screen.getByText(row[index])).toBeInTheDocument(); }); }); @@ -69,11 +68,8 @@ describe("Table", () => { id: "table", property: "value", value: { - id: 1, - data: { - firstName: "John", - lastName: "Doe", - }, + firstName: "John", + lastName: "Doe", }, }); }); diff --git a/chartlets.js/packages/lib/src/plugins/mui/Table.tsx b/chartlets.js/packages/lib/src/plugins/mui/Table.tsx index 928ed3c0..c5dbd78e 100644 --- a/chartlets.js/packages/lib/src/plugins/mui/Table.tsx +++ b/chartlets.js/packages/lib/src/plugins/mui/Table.tsx @@ -14,7 +14,6 @@ interface TableCellProps { id: string | number; size?: "medium" | "small"; align?: "inherit" | "left" | "center" | "right" | "justify"; - padding?: "checkbox" | "none" | "normal"; sx?: SxProps; } @@ -70,30 +69,6 @@ export const Table = ({ } }; - // function descendingComparator(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( - // 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 ( @@ -104,7 +79,6 @@ export const Table = ({ key={column.id} align={column.align || "inherit"} size={column.size || "medium"} - padding={column.padding} > {column.label} @@ -123,7 +97,6 @@ export const Table = ({ key={item_index} align={columns[item_index].align || "inherit"} size={columns[item_index].size || "medium"} - padding={columns[item_index].padding} > {item} diff --git a/chartlets.py/chartlets/components/table.py b/chartlets.py/chartlets/components/table.py index deecf7fc..c27d24ea 100644 --- a/chartlets.py/chartlets/components/table.py +++ b/chartlets.py/chartlets/components/table.py @@ -15,8 +15,6 @@ 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.""" @@ -24,8 +22,10 @@ class TableColumn(TableCellProps): label: str """The display label for the column header.""" + type TableRow = list[list[str | int | float | bool | None]] + @dataclass(frozen=True) class Table(Component): """A basic Table with configurable rows and columns.""" From 7e40affd8cff4145322bf9c35511b49e315dda7b Mon Sep 17 00:00:00 2001 From: Yogesh Kumar Baljeet Singh Date: Wed, 26 Feb 2025 10:12:36 +0100 Subject: [PATCH 09/13] update TableRow type def syntax --- chartlets.py/chartlets/components/table.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/chartlets.py/chartlets/components/table.py b/chartlets.py/chartlets/components/table.py index c27d24ea..81480b3e 100644 --- a/chartlets.py/chartlets/components/table.py +++ b/chartlets.py/chartlets/components/table.py @@ -23,7 +23,7 @@ class TableColumn(TableCellProps): """The display label for the column header.""" -type TableRow = list[list[str | int | float | bool | None]] +TableRow = list[list[str | int | float | bool | None]] @dataclass(frozen=True) From 3bbadeb138f7a8d418e14ee955bce54e561e4ab5 Mon Sep 17 00:00:00 2001 From: Yogesh Kumar Baljeet Singh Date: Wed, 26 Feb 2025 10:17:32 +0100 Subject: [PATCH 10/13] update CHANGES.md --- chartlets.js/CHANGES.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/chartlets.js/CHANGES.md b/chartlets.js/CHANGES.md index 36616bd7..43bc6ccd 100644 --- a/chartlets.js/CHANGES.md +++ b/chartlets.js/CHANGES.md @@ -6,6 +6,7 @@ * New (MUI) components - `DataGrid` - `Dialog` + - `Table` ## Version 0.1.3 (from 2025/01/28) @@ -59,7 +60,6 @@ - `Switch` - `Tabs` - `Slider` - - `Table` * Supporting `tooltip` property for interactive MUI components. From d199da81006dea466fbdb8595a72f98ce3438c1a Mon Sep 17 00:00:00 2001 From: Yogesh Kumar Baljeet Singh Date: Wed, 26 Feb 2025 10:18:47 +0100 Subject: [PATCH 11/13] fix linting --- chartlets.py/demo/my_extension/__init__.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/chartlets.py/demo/my_extension/__init__.py b/chartlets.py/demo/my_extension/__init__.py index 2550f220..265f76a8 100644 --- a/chartlets.py/demo/my_extension/__init__.py +++ b/chartlets.py/demo/my_extension/__init__.py @@ -12,4 +12,4 @@ ext.add(my_panel_3) ext.add(my_panel_4) ext.add(my_panel_5) -ext.add(my_panel_6) \ No newline at end of file +ext.add(my_panel_6) From b10701f1a84b9a592c1738bad702aaa4702604d8 Mon Sep 17 00:00:00 2001 From: b-yogesh Date: Wed, 26 Feb 2025 11:49:11 +0100 Subject: [PATCH 12/13] Update chartlets.py/chartlets/components/table.py Co-authored-by: Norman Fomferra --- chartlets.py/chartlets/components/table.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/chartlets.py/chartlets/components/table.py b/chartlets.py/chartlets/components/table.py index 81480b3e..da89bd11 100644 --- a/chartlets.py/chartlets/components/table.py +++ b/chartlets.py/chartlets/components/table.py @@ -23,7 +23,7 @@ class TableColumn(TableCellProps): """The display label for the column header.""" -TableRow = list[list[str | int | float | bool | None]] +TableRow: TypeAlias = list[list[str | int | float | bool | None]] @dataclass(frozen=True) From a6a6e2dd92146652338210ff350d228875c58312 Mon Sep 17 00:00:00 2001 From: Yogesh Kumar Baljeet Singh Date: Wed, 26 Feb 2025 11:51:05 +0100 Subject: [PATCH 13/13] add typealias import --- chartlets.py/chartlets/components/table.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/chartlets.py/chartlets/components/table.py b/chartlets.py/chartlets/components/table.py index da89bd11..2f0405ae 100644 --- a/chartlets.py/chartlets/components/table.py +++ b/chartlets.py/chartlets/components/table.py @@ -1,5 +1,5 @@ from dataclasses import dataclass -from typing import Literal, TypedDict +from typing import Literal, TypedDict, TypeAlias from chartlets import Component