Rename Table to DataGrid

Author: b-yogesh

chartlets.js/CHANGES.md

@@ -43,7 +43,7 @@
   - `Switch`
   - `Tabs`
   - `Slider`
-  - `Table`
+  - `DataGrid`
 
 * Supporting `tooltip` property for interactive MUI components.
 

…kages/lib/src/plugins/mui/Table.test.tsx …es/lib/src/plugins/mui/DataGrid.test.tsxchartlets.js/packages/lib/src/plugins/mui/Table.test.tsx renamed to chartlets.js/packages/lib/src/plugins/mui/DataGrid.test.tsx chartlets.js/packages/lib/src/plugins/mui/Table.test.tsx renamed to chartlets.js/packages/lib/src/plugins/mui/DataGrid.test.tsx

@@ -1,24 +1,24 @@
 import { describe, expect, it } from "vitest";
 import { fireEvent, render, screen } from "@testing-library/react";
-import { Table } from "./Table";
+import { DataGrid } from "./DataGrid";
 import { createChangeHandler } from "@/plugins/mui/common.test";
 
-describe("Table", () => {
+describe("DataGrid", () => {
   const mockColumns = [
     { field: "id", headerName: "ID" },
     { field: "name", headerName: "Name" },
   ];
   const mockRows = [{ id: 1, name: "MockRow" }];
   const paginationModel = { page: 1, pageSize: 10 };
 
-  it("should render the Table component", () => {
+  it("should render the DataGrid component", () => {
     render(
-      <Table
+      <DataGrid
         columns={mockColumns}
         rows={mockRows}
-        type="Table"
-        id="tableId"
-        ariaLabel="Test Table"
+        type="DataGrid"
+        id="datagridId"
+        ariaLabel="Test DataGrid"
         onChange={() => {}}
         paginationModel={paginationModel}
         pageSizeOptions={[10, 25, 50]}
@@ -28,17 +28,17 @@ describe("Table", () => {
     expect(screen.getByText("MockRow")).toBeInTheDocument();
 
     const grid = screen.getByTestId("data-grid-test-id");
-    expect(grid).toHaveAttribute("aria-label", "Test Table");
+    expect(grid).toHaveAttribute("aria-label", "Test DataGrid");
   });
 
   it("should handle row click", () => {
     const { recordedEvents, onChange } = createChangeHandler();
     render(
-      <Table
+      <DataGrid
         columns={mockColumns}
         rows={mockRows}
-        type="Table"
-        id="tableId"
+        type="DataGrid"
+        id="datagridId"
         onChange={onChange}
       />,
     );
@@ -47,21 +47,21 @@ describe("Table", () => {
     fireEvent.click(row);
 
     expect(recordedEvents.length).toBe(1);
-    expect(recordedEvents[0].componentType).toBe("Table");
-    expect(recordedEvents[0].id).toBe("tableId");
+    expect(recordedEvents[0].componentType).toBe("DataGrid");
+    expect(recordedEvents[0].id).toBe("datagridId");
     expect(recordedEvents[0].property).toBe("value");
     expect(recordedEvents[0].value).toEqual(mockRows[0]);
   });
 
   it("should render with other props correctly", () => {
     render(
-      <Table
+      <DataGrid
         columns={mockColumns}
         rows={mockRows}
-        type="Table"
-        id="tableId"
+        type="DataGrid"
+        id="datagridId"
         onChange={() => {}}
-        ariaLabel="Test Table"
+        ariaLabel="Test DataGrid"
         autoPageSize={true}
         checkboxSelection={true}
         density="compact"
@@ -86,7 +86,12 @@ describe("Table", () => {
 
   it("should not render if no columns are provided", () => {
     render(
-      <Table rows={mockRows} type="Table" id="tableId" onChange={() => {}} />,
+      <DataGrid
+        rows={mockRows}
+        type="DataGrid"
+        id="datagridId"
+        onChange={() => {}}
+      />,
     );
     expect(screen.queryByRole("grid")).not.toBeInTheDocument();
   });

…s/packages/lib/src/plugins/mui/Table.tsx …ackages/lib/src/plugins/mui/DataGrid.tsxchartlets.js/packages/lib/src/plugins/mui/Table.tsx renamed to chartlets.js/packages/lib/src/plugins/mui/DataGrid.tsx chartlets.js/packages/lib/src/plugins/mui/Table.tsx renamed to chartlets.js/packages/lib/src/plugins/mui/DataGrid.tsx

@@ -9,7 +9,7 @@ import {
 } from "@mui/x-data-grid";
 import type { ComponentProps, ComponentState } from "@/index";
 
-interface TableState extends ComponentState {
+interface DataGridState extends ComponentState {
   rows?: GridRowModel[];
   columns?: GridColDef[];
   ariaLabel?: string;
@@ -41,9 +41,9 @@ interface TableState extends ComponentState {
   rowSelection?: boolean;
 }
 
-interface TableProps extends ComponentProps, TableState {}
+interface DataGridProps extends ComponentProps, DataGridState {}
 
-export const Table = ({
+export const DataGrid = ({
   type,
   id,
   style,
@@ -73,7 +73,7 @@ export const Table = ({
   paginationModel,
   pageSizeOptions,
   onChange,
-}: TableProps) => {
+}: DataGridProps) => {
   if (!columns) {
     return;
   }

chartlets.js/packages/lib/src/plugins/mui/index.ts

@@ -11,7 +11,7 @@ import { Switch } from "./Switch";
 import { Tabs } from "./Tabs";
 import { Typography } from "./Typography";
 import { Slider } from "./Slider";
-import { Table } from "@/plugins/mui/Table";
+import { DataGrid } from "@/plugins/mui/DataGrid";
 
 export default function mui(): Plugin {
   return {
@@ -26,7 +26,7 @@ export default function mui(): Plugin {
       ["Select", Select],
       ["Slider", Slider],
       ["Switch", Switch],
-      ["Table", Table],
+      ["DataGrid", DataGrid],
       ["Tabs", Tabs],
       ["Typography", Typography],
     ],

chartlets.py/CHANGES.md

@@ -23,7 +23,7 @@
   - `RadioGroup` and `Radio`
   - `Tabs`
   - `Slider`
-  - `Table`
+  - `DataGrid`
 
 ## Version 0.0.29 (from 2024/11/26)
 

chartlets.py/chartlets/components/__init__.py

@@ -12,7 +12,7 @@
 from .select import Select
 from .slider import Slider
 from .switch import Switch
-from .table import Table
+from .datagrid import DataGrid
 from .tabs import Tab
 from .tabs import Tabs
 from .typography import Typography

…artlets.py/chartlets/components/table.py …lets.py/chartlets/components/datagrid.pychartlets.py/chartlets/components/table.py renamed to chartlets.py/chartlets/components/datagrid.py chartlets.py/chartlets/components/table.py renamed to chartlets.py/chartlets/components/datagrid.py

@@ -23,12 +23,9 @@ class InitialState(TypedDict):
 
 
 @dataclass(frozen=True)
-class Table(Component):
-    """The Data Grid presents information in a structured format of rows and
+class DataGrid(Component):
+    """The DataGrid presents information in a structured format of rows and
     columns.
-
-    The data is displayed in a user-friendly interface for efficient editing,
-    reviewing, and analysis.
     """
 
     rows: List[dict[str, Any]] = field(default_factory=list)

chartlets.py/demo/my_extension/my_panel_4.py

@@ -1,5 +1,5 @@
 from chartlets import Component, Input, Output
-from chartlets.components import Box, Slider, Typography, Table
+from chartlets.components import Box, Slider, Typography, DataGrid
 
 from server.context import Context
 from server.panel import Panel
@@ -49,10 +49,12 @@ def render_panel(
         {"id": 3, "firstName": "Peter", "lastName": "Jones", "age": 40},
     ]
 
-    table = Table(id="table", rows=rows, columns=columns, checkboxSelection=True)
+    datagrid = DataGrid(
+        id="datagrid", rows=rows, columns=columns, checkboxSelection=True
+    )
 
-    table_text = Typography(
-        id="table_text", children=["Click on any row in " "the table."]
+    datagrid_text = Typography(
+        id="datagrid_text", children=["Click on any row in the datagrid."]
     )
 
     return Box(
@@ -63,17 +65,17 @@ def render_panel(
             "height": "100%",
             "gap": "6px",
         },
-        children=[slider, info_text, table, table_text],
+        children=[slider, info_text, datagrid, datagrid_text],
     )
 
 
 # noinspection PyUnusedLocal
 @panel.callback(
     Input("slider"),
-    Input("table"),
+    Input("datagrid"),
     Output("info_text", "children"),
-    Output("table_text", "children"),
+    Output("datagrid_text", "children"),
 )
-def update_info_text(ctx: Context, slider: int, table) -> tuple[str, str]:
+def update_info_text(ctx: Context, slider: int, datagrid) -> tuple[str, str]:
     slider = slider or 0
-    return f"The value is {slider}.", f"The selected row is {table}."
+    return f"The value is {slider}.", f"The selected row is {datagrid}."

…rtlets.py/tests/components/table_test.py …ets.py/tests/components/datagrid_test.pychartlets.py/tests/components/table_test.py renamed to chartlets.py/tests/components/datagrid_test.py chartlets.py/tests/components/table_test.py renamed to chartlets.py/tests/components/datagrid_test.py

@@ -1,8 +1,8 @@
-from chartlets.components import Table
+from chartlets.components import DataGrid
 from tests.component_test import make_base
 
 
-class TableTest(make_base(Table)):
+class DataGridTest(make_base(DataGrid)):
     def test_is_json_serializable(self):
         columns = [
             {"field": "id", "headerName": "ID"},
@@ -15,10 +15,12 @@ def test_is_json_serializable(self):
             {"id": 2, "firstName": "Jane", "lastName": "Smith", "age": 25},
         ]
         self.assert_is_json_serializable(
-            self.cls(rows=rows, columns=columns, id="my-table", checkboxSelection=True),
+            self.cls(
+                rows=rows, columns=columns, id="my-datagrid", checkboxSelection=True
+            ),
             {
-                "type": "Table",
-                "id": "my-table",
+                "type": "DataGrid",
+                "id": "my-datagrid",
                 "rows": rows,
                 "columns": columns,
                 "checkboxSelection": True,