Table Styles update

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

@@ -18,8 +18,10 @@ import {
   handleToSelectedRow,
   TableColumnLinkStyleType,
   TableColumnStyleType,
+  TableHeaderStyleType,
   TableRowStyleType,
   TableStyleType,
+  TableToolbarStyleType,
 } from "comps/controls/styleControlConstants";
 import { CompNameContext, EditorContext } from "comps/editorState";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
@@ -56,6 +58,8 @@ function genLinerGradient(color: string) {
 const getStyle = (
   style: TableStyleType,
   rowStyle: TableRowStyleType,
+  headerStyle: TableHeaderStyleType,
+  toolbarStyle: TableToolbarStyleType
 ) => {
   const background = genLinerGradient(style.background);
   const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground);
@@ -128,6 +132,8 @@ const getStyle = (
 
 const TableWrapper = styled.div<{
   $style: TableStyleType;
+  $headerStyle: TableHeaderStyleType;
+  $toolbarStyle: TableToolbarStyleType;
   $rowStyle: TableRowStyleType;
   $toolbarPosition: "above" | "below" | "close";
   $fixedHeader: boolean;
@@ -136,7 +142,7 @@ const TableWrapper = styled.div<{
   max-height: 100%;
   overflow-y: auto;
   background: white;
-  border: ${(props) => `1px solid ${props.$style.border}`};
+  border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border}`};
   border-radius: ${(props) => props.$style.radius};
 
   .ant-table-wrapper {
@@ -187,10 +193,12 @@ const TableWrapper = styled.div<{
 
         > .ant-table-thead {
           > tr > th {
-            background-color: ${(props) => props.$style.headerBackground};
+            background-color: ${(props) => props.$headerStyle.headerBackground};
             border-color: ${(props) => props.$style.border};
+            border-width: ${(props) => props.$headerStyle.borderWidth};
             color: ${(props) => props.$style.headerText};
-            border-inline-end: ${(props) => `1px solid ${props.$style.border}`} !important;
+            font-size: ${(props) => props.$headerStyle.textSize};
+            border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$style.border}`} !important;
             ${(props) => 
               props.$fixedHeader && `
                 position: sticky;
@@ -267,7 +275,7 @@ const TableWrapper = styled.div<{
   }
   
   ${(props) => 
-    props.$style && getStyle(props.$style, props.$rowStyle)}
+    props.$style && getStyle(props.$style, props.$rowStyle, props.$headerStyle, props.$toolbarStyle)}
 `;
 
 const TableTh = styled.th<{ width?: number }>`
@@ -641,6 +649,8 @@ export function TableCompView(props: {
   const compChildren = comp.children;
   const style = compChildren.style.getView();
   const rowStyle = compChildren.rowStyle.getView();
+  const headerStyle = compChildren.headerStyle.getView();
+  const toolbarStyle = compChildren.toolbarStyle.getView();
   const rowAutoHeight = compChildren.rowAutoHeight.getView();
   const columnsStyle = compChildren.columnsStyle.getView();
   const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]);
@@ -753,6 +763,8 @@ export function TableCompView(props: {
       <TableWrapper
         $style={style}
         $rowStyle={rowStyle}
+        $headerStyle={headerStyle}
+        $toolbarStyle={toolbarStyle}
         $toolbarPosition={toolbar.position}
         $fixedHeader={compChildren.fixedHeader.getView()}
         $fixedToolbar={toolbar.fixedToolbar && toolbar.position === 'above'}

client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx

@@ -507,10 +507,17 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
 
       {["layout", "both"].includes(editorModeStatus) && (
         <><Section name={"Table Style"}>
-            {comp.children.style.getPropertyView()}  
+            {comp.children.style.getPropertyView()} 
+          </Section>
+          <Section name={"Header Style"}>
+            {comp.children.headerStyle.getPropertyView()}
+          </Section>
+          <Section name={"Toolbar Style"}>
+            {comp.children.toolbarStyle.getPropertyView()}
           </Section>
           <Section name={"Row Style"}>
             {comp.children.rowStyle.getPropertyView()}
+            
             {comp.children.rowAutoHeight.getPropertyView()}
             {comp.children.rowHeight.getPropertyView()}
             {comp.children.rowColor.getPropertyView()}

client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx

@@ -13,7 +13,7 @@ import {
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
-import { TableColumnStyle, TableRowStyle, TableStyle } from "comps/controls/styleControlConstants";
+import { TableColumnStyle, TableRowStyle, TableStyle, TableToolbarStyle, TableHeaderStyle } from "comps/controls/styleControlConstants";
 import {
   MultiCompBuilder,
   stateComp,
@@ -184,6 +184,8 @@ const tableChildrenMap = {
   toolbar: TableToolbarComp,
   style: styleControl(TableStyle),
   rowStyle: styleControl(TableRowStyle),
+  toolbarStyle: styleControl(TableToolbarStyle),
+  headerStyle: styleControl(TableHeaderStyle),
   searchText: StringControl,
   columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px'}),
   viewModeResizable: BoolControl,

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -684,6 +684,11 @@ const LinkTextStyle = [
 
 export const TableStyle = [
   ...BG_STATIC_BORDER_RADIUS,
+  {
+    name: "borderWidth",
+    label: trans("style.borderWidth"),
+    borderWidth: "borderWidth",
+  },
   {
     name: "headerBackground",
     label: trans("style.tableHeaderBackground"),
@@ -713,6 +718,45 @@ export const TableStyle = [
   },
 ] as const;
 
+export const TableToolbarStyle = [
+  {
+    name: "toolbarBackground",
+    label: trans("style.toolbarBackground"),
+    depName: "background",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+  },
+  {
+    name: "toolbarText",
+    label: trans("style.toolbarText"),
+    depName: "toolbarBackground",
+    depType: DEP_TYPE.CONTRAST_TEXT,
+    transformer: contrastText,
+  },
+] as const;
+
+export const TableHeaderStyle = [
+  {
+    name: "borderWidth",
+    label: trans("style.borderWidth"),
+    borderWidth: "borderWidth",
+  },
+  {
+    name: "headerBackground",
+    label: trans("style.tableHeaderBackground"),
+    depName: "background",
+    transformer: handleToHeadBg,
+  },
+  {
+    name: "headerText",
+    label: trans("style.tableHeaderText"),
+    depName: "headerBackground",
+    depType: DEP_TYPE.CONTRAST_TEXT,
+    transformer: contrastText,
+  },
+  TEXT_SIZE,
+] as const;
+
 export const TableRowStyle = [
   getBackground(),
   {
@@ -1073,6 +1117,8 @@ export type CheckboxStyleType = StyleConfigType<typeof CheckboxStyle>;
 export type RadioStyleType = StyleConfigType<typeof RadioStyle>;
 export type SegmentStyleType = StyleConfigType<typeof SegmentStyle>;
 export type TableStyleType = StyleConfigType<typeof TableStyle>;
+export type TableHeaderStyleType = StyleConfigType<typeof TableHeaderStyle>;
+export type TableToolbarStyleType = StyleConfigType<typeof TableToolbarStyle>;
 export type TableRowStyleType = StyleConfigType<typeof TableRowStyle>;
 export type TableColumnStyleType = StyleConfigType<typeof TableColumnStyle>;
 export type TableColumnLinkStyleType = StyleConfigType<typeof TableColumnLinkStyle>;