Skip to content

[fix](SqlManagementConf): Fix horizontal scrollbar for tables #782

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LZS911 merged 1 commit into from
Dec 29, 2025
Merged

[fix](SqlManagementConf): Fix horizontal scrollbar for tables #782

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 89 additions & 18 deletions ...qlManagementConf/Detail/ScanTypeSqlCollection/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ exports[`test ScanTypeSqlCollection should match snapshot 1`] = `
</div>
</div>
<div
class="ant-table-wrapper actiontech-table-namespace css-fxd6ka"
class="ant-table-wrapper actiontech-table-namespace css-1gswrju"
>
<div
class="ant-spin-nested-loading"
Expand Down Expand Up @@ -114,17 +114,17 @@ exports[`test ScanTypeSqlCollection should match snapshot 1`] = `
class="ant-spin-container ant-spin-blur"
>
<div
class="ant-table ant-table-empty ant-table-scroll-horizontal"
class="ant-table ant-table-empty ant-table-fixed-header"
>
<div
class="ant-table-container"
>
<div
class="ant-table-content"
style="overflow-x: auto; overflow-y: hidden;"
class="ant-table-header"
style="overflow: hidden;"
>
<table
style="min-width: 100%; table-layout: auto;"
style="table-layout: fixed;"
>
<colgroup />
<thead
Expand All @@ -136,6 +136,16 @@ exports[`test ScanTypeSqlCollection should match snapshot 1`] = `
/>
</tr>
</thead>
</table>
</div>
<div
class="ant-table-body"
style="overflow-y: scroll; max-height: 500px;"
>
<table
style="table-layout: fixed;"
>
<colgroup />
<tbody
class="ant-table-tbody"
>
Expand All @@ -161,9 +171,50 @@ exports[`test ScanTypeSqlCollection should match snapshot 1`] = `
class="ant-table-cell"
>
<div
class="ant-table-expanded-row-fixed"
style="width: 0px; position: sticky; left: 0px; overflow: hidden;"
/>
class="ant-empty ant-empty-normal"
>
<div
class="ant-empty-image"
>
<svg
height="41"
viewBox="0 0 64 41"
width="64"
xmlns="http://www.w3.org/2000/svg"
>
<g
fill="none"
fill-rule="evenodd"
transform="translate(0 1)"
>
<ellipse
cx="32"
cy="33"
fill="#f5f5f5"
rx="32"
ry="7"
/>
<g
fill-rule="nonzero"
stroke="#d9d9d9"
>
<path
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
/>
<path
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
fill="#fafafa"
/>
</g>
</g>
</svg>
</div>
<div
class="ant-empty-description"
>
暂无数据
</div>
</div>
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -587,7 +638,7 @@ exports[`test ScanTypeSqlCollection should match snapshot 2`] = `
</div>
</div>
<div
class="ant-table-wrapper actiontech-table-namespace css-fxd6ka"
class="ant-table-wrapper actiontech-table-namespace css-1gswrju"
>
<div
class="ant-spin-nested-loading"
Expand All @@ -596,17 +647,17 @@ exports[`test ScanTypeSqlCollection should match snapshot 2`] = `
class="ant-spin-container"
>
<div
class="ant-table ant-table-scroll-horizontal"
class="ant-table ant-table-fixed-header"
>
<div
class="ant-table-container"
>
<div
class="ant-table-content"
style="overflow-x: auto; overflow-y: hidden;"
class="ant-table-header"
style="overflow: hidden;"
>
<table
style="min-width: 100%; table-layout: auto;"
style="table-layout: fixed; visibility: hidden;"
>
<colgroup />
<thead
Expand Down Expand Up @@ -960,6 +1011,16 @@ exports[`test ScanTypeSqlCollection should match snapshot 2`] = `
</th>
</tr>
</thead>
</table>
</div>
<div
class="ant-table-body"
style="overflow-y: scroll; max-height: 500px;"
>
<table
style="table-layout: fixed;"
>
<colgroup />
<tbody
class="ant-table-tbody"
>
Expand Down Expand Up @@ -2852,7 +2913,7 @@ exports[`test ScanTypeSqlCollection should open report drawer and set current au
</div>
</div>
<div
class="ant-table-wrapper actiontech-table-namespace css-fxd6ka"
class="ant-table-wrapper actiontech-table-namespace css-1gswrju"
>
<div
class="ant-spin-nested-loading"
Expand All @@ -2861,17 +2922,17 @@ exports[`test ScanTypeSqlCollection should open report drawer and set current au
class="ant-spin-container"
>
<div
class="ant-table ant-table-scroll-horizontal"
class="ant-table ant-table-fixed-header"
>
<div
class="ant-table-container"
>
<div
class="ant-table-content"
style="overflow-x: auto; overflow-y: hidden;"
class="ant-table-header"
style="overflow: hidden;"
>
<table
style="min-width: 100%; table-layout: auto;"
style="table-layout: fixed; visibility: hidden;"
>
<colgroup />
<thead
Expand Down Expand Up @@ -3225,6 +3286,16 @@ exports[`test ScanTypeSqlCollection should open report drawer and set current au
</th>
</tr>
</thead>
</table>
</div>
<div
class="ant-table-body"
style="overflow-y: scroll; max-height: 500px;"
>
<table
style="table-layout: fixed;"
>
<colgroup />
<tbody
class="ant-table-tbody"
>
Expand Down
16 changes: 13 additions & 3 deletions packages/sqle/src/page/SqlManagementConf/Detail/ScanTypeSqlCollection/indx.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {
ActiontechTable,
TableFilterContainer,
useTableFilterContainer,
useTableRequestParams,
Expand All @@ -10,7 +9,10 @@ import { useTranslation } from 'react-i18next';
import ReportDrawer from '../../../../components/ReportDrawer';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useBoolean, useRequest } from 'ahooks';
import { ScanTypeSqlCollectionStyleWrapper } from './style';
import {
ScanTypeSqlCollectionStyleWrapper,
ScanTypeSqlCollectionTableStyleWrapper
} from './style';
import instance_audit_plan from '@actiontech/shared/lib/api/sqle/service/instance_audit_plan';
import {
useCurrentProject,
Expand Down Expand Up @@ -41,6 +43,7 @@ import { ResponseCode } from '@actiontech/dms-kit';
import { message } from 'antd';
import { ROUTE_PATHS } from '@actiontech/dms-kit';
import { ResultIconRenderProps } from '../../../../components/AuditResultMessage/index.type';

const BEING_AUDITED = 'being_audited';
const ScanTypeSqlCollection: React.FC<ScanTypeSqlCollectionProps> = ({
instanceAuditPlanId,
Expand Down Expand Up @@ -299,7 +302,11 @@ const ScanTypeSqlCollection: React.FC<ScanTypeSqlCollectionProps> = ({
</TableToolbar>

{messageContextHolder}
<ActiontechTable
<ScanTypeSqlCollectionTableStyleWrapper
isMultiLineFiltering={
!!tableMetas?.filter_meta_list?.length &&
tableMetas?.filter_meta_list?.length > 6
}
rowKey="id"
setting={tableSetting}
errorMessage={getTableRowError && getErrorMessage(getTableRowError)}
Expand Down Expand Up @@ -358,6 +365,9 @@ const ScanTypeSqlCollection: React.FC<ScanTypeSqlCollectionProps> = ({
pagination={{
total: tableRows?.total
}}
scroll={{
y: '500px' // scroll 中的y 只支持string | number 所以这里的 500px 只是为了开启antd的固定列功能随便写的高度 具体高度在styled中动态计算
}}
/>
<ReportDrawer
title={t(
Expand Down
10 changes: 10 additions & 0 deletions packages/sqle/src/page/SqlManagementConf/Detail/ScanTypeSqlCollection/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { styled } from '@mui/material';
import { ActiontechTable } from '@actiontech/dms-kit/es/components/ActiontechTable';

export const ScanTypeSqlCollectionStyleWrapper = styled('section')`
.table-describe-column {
Expand All @@ -20,3 +21,12 @@
width: fit-content;
}
`;

export const ScanTypeSqlCollectionTableStyleWrapper = styled(ActiontechTable)<{
isMultiLineFiltering: boolean;
}>`
.ant-table-body {
max-height: ${(isMultiLineFiltering) =>
`calc(100vh - ${isMultiLineFiltering ? '278px' : '240px'}) !important`};

Check warning on line 30 in packages/sqle/src/page/SqlManagementConf/Detail/ScanTypeSqlCollection/style.ts

View workflow job for this annotation

GitHub Actions / Coverage annotations (🧪 jest-coverage-report-action)

🌿 Branch is not covered 

Warning! Not covered branch
}
`;