Commit 701d57c

authored

Merge pull request #1892 from kamalqureshi/table_column_alignment

Table column alignment

2 parents c284fd4 + 2a91c02 commit 701d57cCopy full SHA for 701d57c

File tree

1 file changed

+15

-5

lines changed

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

1 file changed

+15

-5

lines changed

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

Lines changed: 15 additions & 5 deletions

Original file line number	Diff line number	Diff line change
@@ -373,15 +373,17 @@ const TableTh = styled.th<{ width?: number }>`
`373`	`373`	${(props) => props.width && `width: ${props.width}px`};
`374`	`374`	`;
`375`	`375`
`376`		`-constTableTd=styled.td<{`
	`376`	`+interfaceTableTdProps{`
`377`	`377`	`$background: string;`
`378`	`378`	`$style: TableColumnStyleType & { rowHeight?: string };`
`379`	`379`	`$defaultThemeDetail: ThemeDetail;`
`380`	`380`	`$linkStyle?: TableColumnLinkStyleType;`
`381`	`381`	`$isEditing: boolean;`
`382`	`382`	`$tableSize?: string;`
`383`	`383`	`$autoHeight?: boolean;`
`384`		-}>`
	`384`	`+ $customAlign?: 'left' \| 'center' \| 'right';`
	`385`	`+}`
	`386`	+const TableTd = styled.td<TableTdProps>`
`385`	`387`	`.ant-table-row-expand-icon,`
`386`	`388`	`.ant-table-row-indent {`
`387`	`389`	`display: ${(props) => (props.$isEditing ? "none" : "initial")};`
`@@ -394,6 +396,7 @@ const TableTd = styled.td<{`
`394`	`396`	`border-color: ${(props) => props.$style.border} !important;`
`395`	`397`	`border-radius: ${(props) => props.$style.radius};`
`396`	`398`	`padding: 0 !important;`
	`399`	`+ text-align: ${(props) => props.$customAlign \|\| 'left'} !important;`
`397`	`400`
`398`	`401`	`> div:not(.editing-border, .editing-wrapper),`
`399`	`402`	`.editing-wrapper .ant-input,`
`@@ -404,8 +407,13 @@ const TableTd = styled.td<{`
`404`	`407`	`font-weight: ${(props) => props.$style.textWeight};`
`405`	`408`	`font-family: ${(props) => props.$style.fontFamily};`
`406`	`409`	`overflow: hidden;`
	`410`	`+ display: flex;`
	`411`	`+ justify-content: ${(props) => props.$customAlign === 'center' ? 'center' : props.$customAlign === 'right' ? 'flex-end' : 'flex-start'};`
	`412`	`+ align-items: center;`
	`413`	`+ text-align: ${(props) => props.$customAlign \|\| 'left'};`
	`414`	`+ padding: 0 8px;`
	`415`	`+ box-sizing: border-box;`
`407`	`416`	${(props) => props.$tableSize === 'small' && `
`408`		`- padding: 1px 8px;`
`409`	`417`	`font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important'};`
`410`	`418`	`font-style:${props.$style.fontStyle} !important;`
`411`	`419`	`min-height: ${props.$style.rowHeight \|\| '14px'};`
`@@ -416,7 +424,6 @@ const TableTd = styled.td<{`
`416`	`424`	`};
`417`	`425`	`};
`418`	`426`	${(props) => props.$tableSize === 'middle' && `
`419`		`- padding: 8px 8px;`
`420`	`427`	`font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important'};`
`421`	`428`	`font-style:${props.$style.fontStyle} !important;`
`422`	`429`	`min-height: ${props.$style.rowHeight \|\| '24px'};`
`@@ -427,7 +434,6 @@ const TableTd = styled.td<{`
`427`	`434`	`};
`428`	`435`	`};
`429`	`436`	${(props) => props.$tableSize === 'large' && `
`430`		`- padding: 16px 16px;`
`431`	`437`	`font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important'};`
`432`	`438`	`font-style:${props.$style.fontStyle} !important;`
`433`	`439`	`min-height: ${props.$style.rowHeight \|\| '48px'};`
`@@ -573,6 +579,7 @@ const TableCellView = React.memo((props: {`
`573`	`579`	`tableSize?: string;`
`574`	`580`	`autoHeight?: boolean;`
`575`	`581`	`loading?: boolean;`
	`582`	`+ customAlign?: 'left' \| 'center' \| 'right';`
`576`	`583`	`}) => {`
`577`	`584`	`const {`
`578`	`585`	`record,`
`@@ -588,6 +595,7 @@ const TableCellView = React.memo((props: {`
`588`	`595`	`tableSize,`
`589`	`596`	`autoHeight,`
`590`	`597`	`loading,`
	`598`	`+ customAlign,`
`591`	`599`	`...restProps`
`592`	`600`	`} = props;`
`593`	`601`
`@@ -648,6 +656,7 @@ const TableCellView = React.memo((props: {`
`648`	`656`	`$isEditing={editing}`
`649`	`657`	`$tableSize={tableSize}`
`650`	`658`	`$autoHeight={autoHeight}`
	`659`	`+ $customAlign={customAlign}`
`651`	`660`	`>`
`652`	`661`	`{loading`
`653`	`662`	`? <TableTdLoading block active $tableSize={tableSize} />`
`@@ -735,6 +744,7 @@ function ResizeableTableComp<RecordType extends object>(props: CustomTableProps<`
`735`	`744`	`autoHeight: rowAutoHeight,`
`736`	`745`	`onClick: () => onCellClick(col.titleText, String(col.dataIndex)),`
`737`	`746`	`loading: customLoading,`
	`747`	`+ customAlign: col.align,`
`738`	`748`	`});`
`739`	`749`	`}, [rowColorFn, rowHeightFn, columnsStyle, size, rowAutoHeight, onCellClick, customLoading]);`
`740`	`750`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit 701d57c

File tree

1 file changed

1 file changed

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

0 commit comments