feat: added column styles

Author: raheeliftikhar5

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

@@ -17,6 +17,7 @@ import {
   defaultTheme,
   handleToHoverRow,
   handleToSelectedRow,
+  TableColumnStyleType,
   TableStyleType,
 } from "comps/controls/styleControlConstants";
 import { CompNameContext, EditorContext } from "comps/editorState";
@@ -292,19 +293,29 @@ const TableTh = styled.th<{ width?: number }>`
   ${(props) => props.width && `width: ${props.width}px`};
 `;
 
-const TableTd = styled.td<{ background: string; $isEditing: boolean }>`
+const TableTd = styled.td<{
+  background: string;
+  columnStyle: TableColumnStyleType;
+  $isEditing: boolean;
+}>`
   .ant-table-row-expand-icon,
   .ant-table-row-indent {
     display: ${(props) => (props.$isEditing ? "none" : "initial")};
   }
-
-  ${(props) =>
-    props.background &&
-    `
-      background: ${props.background} !important;
-   `};
+  > div > div {
+    background: ${(props) => props.background};
+    color: ${(props) => props.columnStyle.cellText} !important;
+    border-radius: ${(props) => props.columnStyle.radius};
+    border-color: ${(props) => props.columnStyle.border};
+  }
 `;
 
+// ${(props) =>
+//   props.background &&
+//   `
+//     background: ${props.background} !important;
+//  `};
+
 const ResizeableTitle = (props: any) => {
   const { onResize, onResizeStop, width, viewModeResizable, ...restProps } = props;
   const [widthChild, setWidthChild] = useState(0);
@@ -365,6 +376,7 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
   columns: CustomColumnType<RecordType>[];
   viewModeResizable: boolean;
   rowColor: RowColorViewType;
+  columnStyle: TableColumnStyleType;
 };
 
 function TableCellView(props: {
@@ -373,8 +385,10 @@ function TableCellView(props: {
   rowColor: RowColorViewType;
   rowIndex: number;
   children: any;
+  columnStyle: TableColumnStyleType;
 }) {
-  const { record, title, rowIndex, rowColor, children, ...restProps } = props;
+  const { record, title, rowIndex, rowColor, children, columnStyle, ...restProps } = props;
+  console.log(columnStyle)
   const [editing, setEditing] = useState(false);
   const rowContext = useContext(TableRowContext);
   let tdView;
@@ -387,7 +401,7 @@ function TableCellView(props: {
       currentOriginalIndex: record[OB_ROW_ORI_INDEX],
       columnTitle: title,
     });
-    let background = "";
+    let { background } = columnStyle;
     if (color) {
       background = genLinerGradient(color);
     }
@@ -398,7 +412,12 @@ function TableCellView(props: {
       background = genLinerGradient(handleToHoverRow(color)) + "," + background;
     }
     tdView = (
-      <TableTd {...restProps} background={background} $isEditing={editing}>
+      <TableTd
+        {...restProps}
+        background={background}
+        columnStyle={columnStyle}
+        $isEditing={editing}
+      >
         {children}
       </TableTd>
     );
@@ -466,6 +485,7 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
         title: col.titleText,
         rowColor: props.rowColor,
         rowIndex: rowIndex,
+        columnStyle: props.columnStyle,
       }),
       onHeaderCell: () => ({
         width: resizeWidth,
@@ -533,6 +553,7 @@ export function TableCompView(props: {
   const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]);
   const hasChange = useMemo(() => !_.isEmpty(changeSet), [changeSet]);
   const columns = useMemo(() => compChildren.columns.getView(), [compChildren.columns]);
+  const columnStyle = useMemo(() => compChildren.columnStyle.getView(), [compChildren.columnStyle]);
   const columnViews = useMemo(() => columns.map((c) => c.getView()), [columns]);
   const data = comp.filterData;
   const sort = useMemo(() => compChildren.sort.getView(), [compChildren.sort]);
@@ -657,6 +678,7 @@ export function TableCompView(props: {
           }}
           showHeader={!compChildren.hideHeader.getView()}
           columns={antdColumns}
+          columnStyle={columnStyle}
           viewModeResizable={compChildren.viewModeResizable.getView()}
           dataSource={pageDataInfo.data}
           size={compChildren.size.getView()}

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

@@ -463,6 +463,9 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
           label: trans("table.hideBordered"),
         })}
       </Section>
+      <Section name={'Column Styles'}>
+        {comp.children.columnStyle.getPropertyView()}
+      </Section>
     </>
   );
 }

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

@@ -10,7 +10,7 @@ import {
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
-import { TableStyle } from "comps/controls/styleControlConstants";
+import { TableColumnStyle, TableStyle } from "comps/controls/styleControlConstants";
 import {
   MultiCompBuilder,
   stateComp,
@@ -143,6 +143,7 @@ const tableChildrenMap = {
   sort: valueComp<Array<SortValue>>([]),
   toolbar: TableToolbarComp,
   style: styleControl(TableStyle),
+  columnStyle: styleControl(TableColumnStyle),
   viewModeResizable: BoolControl,
   // sample data for regenerating columns
   dataRowExample: stateComp<JSONObject | null>(null),

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

@@ -694,6 +694,17 @@ export const TableStyle = [
   },
 ] as const;
 
+export const TableColumnStyle = [
+  ...BG_STATIC_BORDER_RADIUS,
+  {
+    name: "cellText",
+    label: trans("style.tableCellText"),
+    depName: "background",
+    depType: DEP_TYPE.CONTRAST_TEXT,
+    transformer: contrastText,
+  }
+] as const;
+
 export const FileStyle = [...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, ACCENT, MARGIN, PADDING] as const;
 
 export const FileViewerStyle = [
@@ -1001,6 +1012,7 @@ 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 TableColumnStyleType = StyleConfigType<typeof TableColumnStyle>;
 export type FileStyleType = StyleConfigType<typeof FileStyle>;
 export type FileViewerStyleType = StyleConfigType<typeof FileViewerStyle>;
 export type IframeStyleType = StyleConfigType<typeof IframeStyle>;