perf(core): ⚡ improve code

improve code

ref: #336

package/components/dataDisplay/CoreTable.js

@@ -8,29 +8,10 @@ import { getUUID } from "../../utils/appUtils";
 import { sanitizeComponentProps } from "../../utils/componentUtil";
 
 export default function CoreTable(props) {
-  let _uuid = getUUID();
-  // eslint-disable-next-line no-unused-vars
-  let containerId = props?.coreId ? "tc_" + props.coreId : "tc_" + _uuid;
-
   props = sanitizeComponentProps(CoreTable, props);
 
-  const {
-    children,
-    component,
-    padding,
-    size,
-    stickyHeader,
-  } = props;
-
   return (
-    <NativeTable
-      component={component}
-      padding={padding}
-      size={size}
-      stickyHeader={stickyHeader}
-    >
-      {children}
-    </NativeTable>
+    <NativeTable {...props} />
   );
 }
 
@@ -39,45 +20,45 @@ CoreTable.displayName = "CoreTable";
 CoreTable.validProps = [
   {
     description: "The content of the table, normally TableHead and TableBody.",
-    name       : "children",
-    types      : [{ type: "node" }],
+    name: "children",
+    types: [{ type: "node" }],
   },
   {
     description:
       "The component used for the root node. Either a string to use a HTML element or a component.",
-    name : "component",
+    name: "component",
     types: [{ type: "elementType" }],
   },
   {
     description: "Allows TableCells to inherit padding of the Table.",
-    name       : "padding",
-    types      : [
+    name: "padding",
+    types: [
       {
-        default    : "normal",
-        type       : "string",
+        default: "normal",
+        type: "string",
         validValues: ["checkbox", "none", "normal"],
       },
     ],
   },
   {
     description: "Allows TableCells to inherit size of the Table.",
-    name       : "size",
-    types      : [
+    name: "size",
+    types: [
       {
-        default    : "medium",
-        type       : "string",
+        default: "medium",
+        type: "string",
         validValues: ["medium", "small"],
       },
     ],
   },
   {
     description:
       "Set the header sticky. ⚠️ It doesn't work with IE11.",
-    name : "stickyHeader",
+    name: "stickyHeader",
     types: [
       {
-        default    : false,
-        type       : "boolean",
+        default: false,
+        type: "boolean",
         validValues: [true, false],
       },
     ],

package/components/dataDisplay/CoreTableBody.js

@@ -8,20 +8,20 @@ import { sanitizeComponentProps } from "../../utils/componentUtil";
 
 export default function CoreTableBody(props) {
   props = sanitizeComponentProps(CoreTableBody, props);
-  return <NativeTableBody {...props}>{props?.children}</NativeTableBody>;
+  return <NativeTableBody {...props} />;
 }
 
 CoreTableBody.displayName = "CoreTableBody";
 CoreTableBody.validProps = [
   {
     description: "The content of the component, normally CoreTableRow.",
-    name       : "children",
-    types      : [{ type: "node" }]
+    name: "children",
+    types: [{ type: "node" }]
   },
   {
     description: "The component used for the root node. Either a string to use a HTML element or a component.",
-    name       : "component",
-    types      : [{ type: "elementType" }]
+    name: "component",
+    types: [{ type: "elementType" }]
   }
 ];
 CoreTableBody.invalidProps = [];

package/components/dataDisplay/CoreTableContainer.js

@@ -8,20 +8,20 @@ import { sanitizeComponentProps } from "../../utils/componentUtil";
 
 export default function CoreTableContainer(props) {
   props = sanitizeComponentProps(CoreTableContainer, props);
-  return <NativeTableContainer {...props}>{props?.children}</NativeTableContainer>;
+  return <NativeTableContainer {...props} />;
 }
 
 CoreTableContainer.displayName = "CoreTableContainer";
 CoreTableContainer.validProps = [
   {
     description: "The content of the component, normally CoreTable.",
-    name       : "children",
-    types      : [{ type: "node" }]
+    name: "children",
+    types: [{ type: "node" }]
   },
   {
     description: "The component used for the root node. Either a string to use a HTML element or a component.",
-    name       : "component",
-    types      : [{ type: "elementType" }]
+    name: "component",
+    types: [{ type: "elementType" }]
   }
 ];
 

package/components/dataDisplay/CoreTableFooter.js

@@ -8,19 +8,19 @@ import { sanitizeComponentProps } from "../../utils/componentUtil";
 
 export default function CoreTableFooter(props) {
   props = sanitizeComponentProps(CoreTableFooter, props);
-  return <NativeTableFooter {...props}>{props?.children}</NativeTableFooter>;
+  return <NativeTableFooter {...props} />;
 }
 CoreTableFooter.displayName = "CoreTableFooter";
 CoreTableFooter.validProps = [
   {
     description: "The content of the component, normally CoreTableRow.",
-    name       : "children",
-    types      : [{ type: "node" }]
+    name: "children",
+    types: [{ type: "node" }]
   },
   {
     description: "The component used for the root node. Either a string to use a HTML element or a component.",
-    name       : "component",
-    types      : [{ type: "elementType" }]
+    name: "component",
+    types: [{ type: "elementType" }]
   }
 ];
 

package/components/dataDisplay/CoreTablePagination.js

@@ -8,14 +8,20 @@ import CoreTableCell from "./CoreTableCell";
 import { DATA_TABLE_CONST } from "../../config/dataTableConstants";
 import { sanitizeComponentProps } from "../../utils/componentUtil";
 
+/**
+ * CoreTablePagination is a component that displays pagination controls for a table.
+ * @todo rowsPerPageOptions via wrappid style context.
+ * @param {*} props 
+ * @returns 
+ */
 export default function CoreTablePagination(props) {
   props = sanitizeComponentProps(CoreTablePagination, props);
+  const { rowsPerPageOptions, ...restProps } = props;
   return (
     <NativeTablePagination
-      component={"div"}
       labelRowsPerPage="" // make it clean
-      rowsPerPageOptions={DATA_TABLE_CONST.ROWS_PER_PAGE_OPTIONS}
-      {...props}
+      rowsPerPageOptions={rowsPerPageOptions || DATA_TABLE_CONST.ROWS_PER_PAGE_OPTIONS}
+      {...restProps}
     />
   );
 }
@@ -25,8 +31,8 @@ CoreTablePagination.validProps = [
   ...CoreTableCell.validProps,
   {
     description: "The total number of rows. To enable server side pagination for an unknown number of items, provide -1.",
-    name       : "count",
-    types      : [{ type: "integer" }]
+    name: "count",
+    types: [{ type: "integer" }]
   },
   {
     description: `Callback fired when the page is changed.
@@ -35,36 +41,36 @@ function(event: React.MouseEvent | null, page: number) => void
 
   - event The event source of the callback.
   - page The page selected.`,
-    name : "onPageChange",
+    name: "onPageChange",
     types: [{ type: "function" }]
   },
   {
     description: "The zero-based index of the current page.",
-    name       : "page",
-    types      : [{ type: "integer" }]
+    name: "page",
+    types: [{ type: "integer" }]
   },
   {
     decription: "The number of rows per page. Set -1 to display all the rows.",
-    name      : "rowsPerPage",
-    types     : [{ type: "integer" }]
+    name: "rowsPerPage",
+    types: [{ type: "integer" }]
   },
   {
     description: "The component used for displaying the actions. Either a string to use a HTML element or a component.",
-    name       : "ActionsComponent",
-    types      : [
+    name: "ActionsComponent",
+    types: [
       {
         default: "TablePaginationActions",
-        type   : "elementType"
+        type: "elementType"
       }
     ]
   },
   {
     description: "If true, the component is disabled.",
-    name       : "disabled",
-    types      : [
+    name: "disabled",
+    types: [
       {
-        default    : false,
-        type       : "boolean",
+        default: false,
+        type: "boolean",
         validValues: [true, false]
       }
     ]
@@ -75,7 +81,7 @@ Signature:
 function(type: string) => string
 
   - type The link or button type to format ('first' | 'last' | 'next' | 'previous').`,
-    name : "getItemAriaLabel",
+    name: "getItemAriaLabel",
     types: [
       {
         // eslint-disable-next-line etc/no-commented-out-code
@@ -86,8 +92,8 @@ function(type: string) => string
   },
   {
     description: "Customize the displayed rows label. Invoked with a { from, to, count, page } object.",
-    name       : "labelDisplayedRows",
-    types      : [
+    name: "labelDisplayedRows",
+    types: [
       {
         // eslint-disable-next-line etc/no-commented-out-code
         // default: "function defaultLabelDisplayedRows({ from, to, count }) { return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`; }",
@@ -97,11 +103,11 @@ function(type: string) => string
   },
   {
     description: "Customize the rows per page label",
-    name       : "labelRowsPerPage",
-    types      : [
+    name: "labelRowsPerPage",
+    types: [
       {
         default: "Rows per page:",
-        type   : "node"
+        type: "node"
       }
     ]
   },
@@ -111,58 +117,58 @@ Signature:
 function(event: React.ChangeEvent) => void
 
   - event The event source of the callback.`,
-    name : "onRowsPerPageChange",
+    name: "onRowsPerPageChange",
     types: [{ type: "function" }]
   },
   {
     description: "Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. Use -1 for the value with a custom label to show all the rows.",
-    name       : "rowsPerPageOptions",
-    types      : [
+    name: "rowsPerPageOptions",
+    types: [
       {
         default: DATA_TABLE_CONST.ROWS_PER_PAGE_OPTIONS,
-        type   : "any"
+        type: "any"
       }
     ]
   },
   {
     description: "If true, show the first-page button.",
-    name       : "showFirstButton",
-    types      : [
+    name: "showFirstButton",
+    types: [
       {
-        default    : false,
-        type       : "boolean",
+        default: false,
+        type: "boolean",
         validValues: [true, false]
       }
     ]
   },
   {
     description: "If true, show the last-page button.",
-    name       : "showLastButton",
-    types      : [
+    name: "showLastButton",
+    types: [
       {
-        default    : false,
-        type       : "boolean",
+        default: false,
+        type: "boolean",
         validValues: [true, false]
       }
     ]
   },
   {
     description: "The props used for each slot inside the CoreTablePagination.",
-    name       : "slotProps",
-    types      : [
+    name: "slotProps",
+    types: [
       {
         default: {},
-        type   : "object"
+        type: "object"
       }
     ]
   },
   {
     description: "The components used for each slot inside the CoreTablePagination. Either a string to use a HTML element or a component.",
-    name       : "slots",
-    types      : [
+    name: "slots",
+    types: [
       {
         default: {},
-        type   : "object"
+        type: "object"
       }
     ]
   }