remove column name

doc/gui/extension/example_library/example_library.py

@@ -39,7 +39,7 @@ class ExampleLibrary(ElementLibrary):
                     "data": ElementProperty(PropertyType.data),
                 },
                 # The name of the React component (GameTable) that implements this custom
-                # element, exported as BasicTable in front-end/src/index.ts
+                # element, exported as GameTable in front-end/src/index.ts
                 react_component="GameTable",
             ),
         }

doc/gui/extension/example_library/front-end/src/BasicTable.tsx

@@ -18,22 +18,22 @@ const pageKey = "no-page-key";
 
 const GameTable = (props: GameTableProps) => {
     const { data, updateVarName = "", updateVars = "", id } = props;
-    const [value, setValue] = useState<TableValueType>({});
+    const [value, setValue] = useState<Record<string, Array<RowValue>>>({});
     const dispatch = useDispatch();
     const module = useModule();
     const refresh = data?.__taipy_refresh !== undefined;
     useDispatchRequestUpdateOnFirstRender(dispatch, id, module, updateVars);
 
     const colsOrder = useMemo(() => {
-        return Object.keys(value || {});
+        return Object.keys(value);
     }, [value]);
 
     const rows = useMemo(() => {
         const rows: RowType[] = [];
         if (value) {
-            colsOrder.forEach((col) => {
-                if (value[col]) {
-                    value[col].forEach((val: RowValue, idx: number) => {
+            Object.entries(value).forEach(([col, colValues]) => {
+                if (colValues) {
+                    colValues.forEach((val: RowValue, idx: number) => {
                         rows[idx] = rows[idx] || {};
                         rows[idx][col] = val;
                     });
@@ -41,7 +41,7 @@ const GameTable = (props: GameTableProps) => {
             });
         }
         return rows;
-    }, [value, colsOrder]);
+    }, [value]);
 
     useEffect(() => {
         if (refresh || !data || data[pageKey] === undefined) {
@@ -65,11 +65,6 @@ const GameTable = (props: GameTableProps) => {
     return (
         <div>
             <table border={1} cellPadding={10} cellSpacing={0}>
-                <thead>
-                    {colsOrder.map((col, idx) => (
-                        <th key={col + idx}>{col}</th>
-                    ))}
-                </thead>
                 <tbody>
                     {rows.map((row, index) => (
                         <tr key={"row" + index}>

doc/gui/extension/table_chess_game.py

@@ -8,8 +8,6 @@
 # Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
 # an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 # specific language governing permissions and limitations under the License.
-
-import pandas as pd
 from example_library import ExampleLibrary
 
 from taipy.gui import Gui
@@ -25,13 +23,10 @@ chessboard = [
     ["♜", "♞", "♝", "♛", "♚", "♝", "♞", "♜"]
 ]
 
-# Create a DataFrame to represent the chessboard
-data = pd.DataFrame(chessboard, columns=["A", "B", "C", "D", "E", "F", "G", "H"])
-
 page = """
 ## Chess Game
-<|{data}|example.game_table|>
+<|{chessboard}|example.game_table|>
 """
 
 if __name__ == "__main__":
-    Gui(page, libraries=[ExampleLibrary()]).run(title="Chess Game", port=3003)
+    Gui(page, libraries=[ExampleLibrary()]).run(title="Chess Game")