solve header table colorize

src/core/components/DataTable/head/TableHead.js

@@ -47,12 +47,13 @@ const DataTable_TableHead = ({
         >
             {table
                 .getHeaderGroups()
-                .map((headerGroup) => (
+                .map((headerGroup, index) => (
                     <DataTable_TableHeadRow
                         columnVirtualizer={columnVirtualizer}
                         headerGroup={headerGroup}
                         key={headerGroup.id}
                         table={table}
+                        index={index}
                     />
                 ))
             }

src/core/components/DataTable/head/TableHeadCell.js

@@ -262,6 +262,9 @@ const DataTable_TableHeadCell = ({
                                 minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
                                 overflow: columnDefType === 'data' ? 'hidden' : undefined,
                                 textOverflow: 'ellipsis',
+                                color: "#fff",
+                                fontSize: "14px",
+                                fontWeight: "500",
                                 whiteSpace:
                                     (columnDef.header?.length ?? 0) < 20
                                         ? 'nowrap'
@@ -271,7 +274,8 @@ const DataTable_TableHeadCell = ({
                             {HeaderElement}
                         </Box>
                         {(column.getCanSort() && columnDefType !== 'group') && (
-                            <MRT_TableHeadCellSortLabel sx={{ width: 20 }} header={header} table={table} />
+                            <MRT_TableHeadCellSortLabel sx={{width: 20, color: "#fff"}} header={header}
+                                                        table={table}/>
                         )}
                     </Box>
                 </Box>

src/core/components/DataTable/head/TableHeadRow.js

@@ -6,54 +6,41 @@ const DataTable_TableHeadRow = ({
                                     columnVirtualizer,
                                     headerGroup,
                                     table,
+                                    index, // Add index prop
                                     ...rest
                                 }) => {
     const {
         options: {
             enableStickyHeader,
             layoutMode,
-            mrtTheme: { baseBackgroundColor },
             muiTableHeadRowProps,
         },
     } = table;
-
     const {virtualColumns, virtualPaddingLeft, virtualPaddingRight} =
     columnVirtualizer ?? {};
 
+    const backgroundColor = index % 2 === 0 ? '#2070af' : '#ff5c0f';
+
     const tableRowProps = {
         ...parseFromValuesOrFunc(muiTableHeadRowProps, {
             headerGroup,
             table,
         }),
         ...rest,
+        sx: (theme) => ({ // Access theme from the sx function
+            ...(parseFromValuesOrFunc(muiTableHeadRowProps?.sx, theme) || {}),
+            backgroundColor, // Apply background color
+            display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+            position: enableStickyHeader && layoutMode === 'semantic' ? 'sticky' : 'relative',
+            top: 0,
+        }),
     };
 
     return (
-        <TableRow
+        <TableRow {...tableRowProps}>
-            {...tableRowProps}
+            {virtualPaddingLeft && <th style={{display: 'flex', width: virtualPaddingLeft}}/>}
-            sx={(theme) => ({
+            {(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
-                backgroundColor: baseBackgroundColor,
+                const header = columnVirtualizer ? headerGroup.headers[headerOrVirtualHeader.index] : headerOrVirtualHeader;
-                display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-                position:
-                    enableStickyHeader && layoutMode === 'semantic'
-                        ? 'sticky'
-                        : 'relative',
-                top: 0,
-                ...(parseFromValuesOrFunc(tableRowProps?.sx, theme)),
-            })}
-        >
-            {virtualPaddingLeft ? (
-                <th style={{ display: 'flex', width: virtualPaddingLeft }} />
-            ) : null}
-            {(virtualColumns ?? headerGroup.headers).map(
-                (headerOrVirtualHeader, staticColumnIndex) => {
-                    let header = headerOrVirtualHeader;
-
-                    if (columnVirtualizer) {
-                        staticColumnIndex = (headerOrVirtualHeader)
-                            .index;
-                        header = headerGroup.headers[staticColumnIndex];
-                    }
 
                 return header ? (
                     <DataTable_TableHeadCell
@@ -64,13 +51,10 @@ const DataTable_TableHeadRow = ({
                         table={table}
                     />
                 ) : null;
-                },
+            })}
-            )}
+            {virtualPaddingRight && <th style={{display: 'flex', width: virtualPaddingRight}}/>}
-            {virtualPaddingRight ? (
-                <th style={{ display: 'flex', width: virtualPaddingRight }} />
-            ) : null}
         </TableRow>
     );
+};
 
-}
+export default DataTable_TableHeadRow;
-export default DataTable_TableHeadRow