Skip to content

Commit 6e01901

Browse files
James-BaloyiJames-Baloyi
authored
Merge pull request #4474 from James-Baloyi/james/b/table-styles
fix cell divider
2 parents 2f62653 + d90ae0e commit 6e01901

File tree

9 files changed

+242
-44
lines changed

9 files changed

+242
-44
lines changed

‎shesha-reactjs/src/components/dataTable/index.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,13 @@ export interface IIndexTableProps extends IShaDataTableProps, TableProps {
113113
// Body font styling
114114
bodyFontFamily?: string;
115115
bodyFontSize?: string;
116-
bodyFontWeight?: string;
116+
bodyFontWeight?: number & {} | string;
117117
bodyFontColor?: string;
118118

119+
// Action column icon styling
120+
actionIconSize?: string | number;
121+
actionIconColor?: string;
122+
119123
// Cell styling
120124
cellTextColor?: string;
121125
cellBackgroundColor?: string;
@@ -200,6 +204,8 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
200204
bodyFontSize,
201205
bodyFontWeight,
202206
bodyFontColor,
207+
actionIconSize,
208+
actionIconColor,
203209
columnsMismatch,
204210
...props
205211
}) => {
@@ -368,7 +374,8 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
368374
if (!onRowDoubleClick?.actionName) return undefined;
369375

370376
return (row: any, rowIndex: number) => {
371-
const evaluationContext = { ...appContext, data: row, rowIndex };
377+
const currentSelectedRow = { index: rowIndex, row: row, id: row?.id };
378+
const evaluationContext = { ...appContext, data: row, rowIndex, selectedRow: currentSelectedRow };
372379

373380
try {
374381
executeAction({
@@ -1020,6 +1027,8 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
10201027
bodyFontSize,
10211028
bodyFontWeight,
10221029
bodyFontColor,
1030+
actionIconSize,
1031+
actionIconColor,
10231032
};
10241033

10251034
// Always render ReactTable - it handles empty columns gracefully

‎shesha-reactjs/src/components/reactTable/index.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,8 @@ export const ReactTable: FC<IReactTableProps> = ({
128128
bodyFontSize,
129129
bodyFontWeight,
130130
bodyFontColor,
131+
actionIconSize,
132+
actionIconColor,
131133
}) => {
132134
const [componentState, setComponentState] = useState<IReactTableState>({
133135
allRows: data,
@@ -181,6 +183,8 @@ export const ReactTable: FC<IReactTableProps> = ({
181183
bodyFontWeight,
182184
bodyFontColor,
183185
freezeHeaders,
186+
actionIconSize,
187+
actionIconColor,
184188
});
185189

186190
const { setDragState } = useDataTableStore();
@@ -701,7 +705,8 @@ export const ReactTable: FC<IReactTableProps> = ({
701705
}}
702706
onRowHover={() => {
703707
if (onRowHover) onRowHover(rowIndex, row.original);
704-
dispatchRowEvent(onRowHoverAction, row.original, rowIndex);
708+
const currentSelectedRow = { index: rowIndex, row: row.original, id: row.original?.id };
709+
dispatchRowEvent(onRowHoverAction, row.original, rowIndex, currentSelectedRow);
705710
}}
706711
row={row}
707712
showExpandedView={showExpandedView}
@@ -832,7 +837,12 @@ export const ReactTable: FC<IReactTableProps> = ({
832837
fontWeight: '600',
833838
display: 'flex',
834839
alignItems: 'center',
835-
justifyContent: effectiveHeaderTextAlign === 'center' ? 'center' : effectiveHeaderTextAlign === 'right' ? 'flex-end' : 'flex-start',
840+
// Map headerTextAlign to justify-content for flex container
841+
justifyContent:
842+
effectiveHeaderTextAlign === 'center' ? 'center'
843+
: effectiveHeaderTextAlign === 'right' ? 'flex-end'
844+
: effectiveHeaderTextAlign === 'justify' ? 'space-between'
845+
: 'flex-start', // default for 'left' or undefined
836846
}}
837847
>
838848
{column.render('Header')}

‎shesha-reactjs/src/components/reactTable/interfaces.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -314,9 +314,13 @@ export interface IReactTableProps extends ITableRowDragProps {
314314
// Body font styling
315315
bodyFontFamily?: string;
316316
bodyFontSize?: string;
317-
bodyFontWeight?: string;
317+
bodyFontWeight?: number & {} | string;
318318
bodyFontColor?: string;
319319

320+
// Action column icon styling
321+
actionIconSize?: string | number;
322+
actionIconColor?: string;
323+
320324
// Overall table styling
321325
borderRadius?: string;
322326
border?: IBorderValue;

‎shesha-reactjs/src/components/reactTable/styles/styles.ts‎

Lines changed: 68 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
7373
bodyFontWeight,
7474
bodyFontColor,
7575
freezeHeaders,
76+
actionIconSize,
77+
actionIconColor,
7678
}: {
7779
rowBackgroundColor?: string;
7880
rowAlternateBackgroundColor?: string;
@@ -104,9 +106,11 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
104106
rowDividers?: boolean;
105107
bodyFontFamily?: string;
106108
bodyFontSize?: string;
107-
bodyFontWeight?: string;
109+
bodyFontWeight?: number & {} | string;
108110
bodyFontColor?: string;
109111
freezeHeaders?: boolean;
112+
actionIconSize?: string | number;
113+
actionIconColor?: string;
110114
}) => {
111115
const {
112116
shaTable,
@@ -312,6 +316,12 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
312316
/* Apply text alignment to header cells */
313317
.${th} {
314318
${headerTextAlign ? `text-align: ${headerTextAlign} !important;` : ''}
319+
320+
/* Map headerTextAlign to justify-content for flex containers */
321+
${headerTextAlign === 'left' ? 'justify-content: flex-start !important;' : ''}
322+
${headerTextAlign === 'right' ? 'justify-content: flex-end !important;' : ''}
323+
${headerTextAlign === 'center' ? 'justify-content: center !important;' : ''}
324+
${headerTextAlign === 'justify' ? 'justify-content: space-between !important;' : ''}
315325
}
316326
317327
/* Apply header background to relative columns within headers */
@@ -322,6 +332,10 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
322332
323333
&.${trBody} {
324334
${rowHeight ? `height: ${rowHeight};` : 'height: auto;'}
335+
/* Row must be positioned and use flex for separators to work */
336+
position: relative;
337+
display: flex;
338+
align-items: stretch;
325339
${(() => {
326340
// Prefer rowBorderStyle over rowBorder for full border control
327341
if (rowBorderStyle) {
@@ -353,7 +367,6 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
353367
${bodyFontWeight ? `font-weight: ${bodyFontWeight} !important;` : ''}
354368
${bodyFontColor ? `color: ${bodyFontColor} !important;` : ''}
355369
${bodyTextAlign ? `text-align: ${bodyTextAlign} !important;` : ''}
356-
357370
}
358371
359372
/* Apply body font styles to form component content */
@@ -433,6 +446,24 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
433446
vertical-align: middle;
434447
${cellBorders && cellBorderColor ? `border: 1px solid ${cellBorderColor};` : ''}
435448
${Object.entries(cellBorderStyles).map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`).join(' ')}
449+
450+
/* Action icons styling for all table cells */
451+
.sha-link {
452+
/* Always center icons regardless of cell text-align */
453+
display: inline-flex;
454+
align-items: center;
455+
justify-content: center;
456+
width: 100%;
457+
458+
.${iconPrefixCls} {
459+
font-size: ${actionIconSize || bodyFontSize || '16px'};
460+
width: ${actionIconSize || bodyFontSize || '16px'};
461+
height: ${actionIconSize || bodyFontSize || '16px'};
462+
min-width: ${actionIconSize || bodyFontSize || '16px'};
463+
min-height: ${actionIconSize || bodyFontSize || '16px'};
464+
${actionIconColor ? `color: ${actionIconColor};` : ''}
465+
}
466+
}
436467
}
437468
438469
.${th} {
@@ -459,11 +490,12 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
459490
height: auto;
460491
461492
.${iconPrefixCls} {
462-
font-size: ${bodyFontSize || '16px'};
463-
width: ${bodyFontSize || '16px'};
464-
height: ${bodyFontSize || '16px'};
465-
min-width: ${bodyFontSize || '16px'};
466-
min-height: ${bodyFontSize || '16px'};
493+
font-size: ${actionIconSize || bodyFontSize || '16px'};
494+
width: ${actionIconSize || bodyFontSize || '16px'};
495+
height: ${actionIconSize || bodyFontSize || '16px'};
496+
min-width: ${actionIconSize || bodyFontSize || '16px'};
497+
min-height: ${actionIconSize || bodyFontSize || '16px'};
498+
${actionIconColor ? `color: ${actionIconColor};` : ''}
467499
display: inline-flex;
468500
align-items: center;
469501
justify-content: center;
@@ -476,11 +508,12 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
476508
align-items: center;
477509
478510
.${iconPrefixCls} {
479-
font-size: ${bodyFontSize || '16px'};
480-
width: ${bodyFontSize || '16px'};
481-
height: ${bodyFontSize || '16px'};
482-
min-width: ${bodyFontSize || '16px'};
483-
min-height: ${bodyFontSize || '16px'};
511+
font-size: ${actionIconSize || bodyFontSize || '16px'};
512+
width: ${actionIconSize || bodyFontSize || '16px'};
513+
height: ${actionIconSize || bodyFontSize || '16px'};
514+
min-width: ${actionIconSize || bodyFontSize || '16px'};
515+
min-height: ${actionIconSize || bodyFontSize || '16px'};
516+
${actionIconColor ? `color: ${actionIconColor};` : ''}
484517
display: inline-flex;
485518
align-items: center;
486519
justify-content: center;
@@ -712,14 +745,33 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
712745
overflow: hidden;
713746
text-overflow: ellipsis;
714747
margin: 0;
715-
border-right: 1px solid rgba(0, 0, 0, 0.05);
716748
padding: 0.5rem; /* Default padding for all cells */
717749
750+
/* Add vertical separator using pseudo-element that stretches full height */
751+
&::after {
752+
content: '';
753+
position: absolute;
754+
right: 0;
755+
top: 0;
756+
bottom: 0px;
757+
width: 1px;
758+
background-color: rgba(0, 0, 0, 0.05);
759+
pointer-events: none;
760+
}
761+
718762
/* Only apply minimum height when rowHeight is auto to prevent empty cell collapse */
719763
${!rowHeight || rowHeight === 'auto' ? `
720-
height: 44px;
721-
vertical-align: middle;
722-
line-height: normal;
764+
/* Force cells to stretch to row height - !important overrides React Table inline styles */
765+
min-height: 44px !important;
766+
height: auto !important;
767+
align-self: stretch !important;
768+
display: flex !important;
769+
justify-content: ${bodyTextAlign === 'right'
770+
? 'flex-end'
771+
: bodyTextAlign === 'center'
772+
? 'center'
773+
: 'flex-start'} !important;
774+
align-items: center !important;
723775
724776
/* Force empty cells to maintain height */
725777
&:empty::before {

‎shesha-reactjs/src/designer-components/dataTable/table/models.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,9 @@ export interface ITableComponentBaseProps extends IShaDataTableInlineEditablePro
134134
rowDividers?: boolean; // Horizontal dividers between rows
135135
responsiveMode?: 'scroll' | 'stack' | 'collapse';
136136

137+
actionIconSize?: string | number; // Icon size for action columns (inherits from bodyFontSize if not set)
138+
actionIconColor?: string; // Icon color for action columns
139+
137140
// Table settings nested structure for form binding
138141
tableSettings?: {
139142
rowHeight?: string;

‎shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -377,7 +377,12 @@ const TableComponent: TableComponentDefinition = {
377377
rowDimensions: updateRowHeight(prev.desktop?.rowDimensions),
378378
},
379379
};
380-
}),
380+
})
381+
.add<ITableComponentProps>(29, (prev) => ({
382+
...prev,
383+
// Set default actionIconSize for existing tables
384+
actionIconSize: prev.actionIconSize ?? '14px',
385+
})),
381386
actualModelPropertyFilter: (name, value) => {
382387
// Allow all styling properties through to the settings form
383388
const allowedStyleProperties = [

‎shesha-reactjs/src/designer-components/dataTable/table/tableSettings.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -662,6 +662,43 @@ export const getSettings: SettingsFormMarkupFactory = ({ fbf }) => {
662662
],
663663
},
664664
})
665+
.addCollapsiblePanel({
666+
id: nanoid(),
667+
propertyName: 'actionIconStyling',
668+
label: 'Action Column Icons',
669+
labelAlign: 'right',
670+
ghost: true,
671+
parentId: appearanceTabId,
672+
collapsible: 'header',
673+
className: 'ant-collapse-ghost',
674+
content: {
675+
id: nanoid(),
676+
components: [...fbf()
677+
.addSettingsInputRow({
678+
id: nanoid(),
679+
inputs: [
680+
{
681+
id: nanoid(),
682+
propertyName: 'actionIconSize',
683+
label: 'Icon Size',
684+
type: 'textField',
685+
tooltip: 'Size of action column icons (e.g., 16px, 1.2em). Inherits from table font size if not specified.',
686+
jsSetting: true,
687+
},
688+
{
689+
id: nanoid(),
690+
propertyName: 'actionIconColor',
691+
label: 'Icon Color',
692+
type: 'colorPicker',
693+
tooltip: 'Color of action column icons',
694+
jsSetting: true,
695+
},
696+
],
697+
})
698+
.toJson(),
699+
],
700+
},
701+
})
665702
.toJson(),
666703
...fbf()
667704
.addPropertyRouter({

0 commit comments

Comments
 (0)