diff --git a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts b/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts
index 4d2a8555460..4ee37ae5ca0 100644
--- a/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts
+++ b/openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts
@@ -1221,7 +1221,11 @@ export const filterStatus = async (
await saveButton.click();
const glossaryTermsTable = page.getByTestId('glossary-terms-table');
- const rows = glossaryTermsTable.locator('tbody tr');
+ // will select all
elements inside the
but exclude those with aria-hidden="true"
+ // since we have added re-sizeable columns, that one entry is present in the tbody
+ const rows = glossaryTermsTable.locator(
+ 'tbody.ant-table-tbody > tr:not([aria-hidden="true"])'
+ );
const statusColumnIndex = 3;
for (let i = 0; i < (await rows.count()); i++) {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
index 1c6b5246158..c0135d64f7b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx
@@ -155,7 +155,7 @@ const GlossaryTermTab = ({
key: 'name',
className: 'glossary-name-column',
ellipsis: true,
- width: '40%',
+ width: 200,
render: (_, record) => {
const name = getEntityName(record);
@@ -184,7 +184,7 @@ const GlossaryTermTab = ({
title: t('label.description'),
dataIndex: 'description',
key: 'description',
- width: permissions.Create ? '21%' : '33%',
+ width: 250,
render: (description: string) =>
description.trim() ? (
(
{
return isEmpty(synonyms) ? (
{NO_DATA_PLACEHOLDER}
@@ -235,14 +235,18 @@ const GlossaryTermTab = ({
title: t('label.owner-plural'),
dataIndex: 'owners',
key: 'owners',
- width: '17%',
+ width: 150,
render: (owners: EntityReference[]) => ,
},
{
title: t('label.status'),
dataIndex: 'status',
key: 'status',
- width: '12%',
+ // this check is added to the width, since the last column is optional and to maintain
+ // the re-sizing of the column should not be affected the others columns width sizes.
+ ...(permissions.Create && {
+ width: 100,
+ }),
render: (_, record) => {
const status = record.status ?? Status.Approved;
@@ -261,7 +265,6 @@ const GlossaryTermTab = ({
data.push({
title: t('label.action-plural'),
key: 'new-term',
- width: '10%',
render: (_, record) => {
const status = record.status ?? Status.Approved;
const allowAddTerm = status === Status.Approved;
@@ -887,6 +890,7 @@ const GlossaryTermTab = ({
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx
index 85b9b1e38e8..ec80a3752ee 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx
@@ -72,7 +72,13 @@ const Table = ({
const resizingTableProps = rest.resizableColumns
? {
columns: resizableColumns,
- components,
+ components: {
+ ...rest.components,
+ header: {
+ row: rest.components?.header?.row,
+ cell: components.header.cell,
+ },
+ },
scroll: { x: tableWidth },
}
: {};
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less
index 5bbdd79a066..73e25daf62c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/table.less
@@ -11,6 +11,8 @@
* limitations under the License.
*/
+@import (reference) url('../variables.less');
+
.ant-table-wrapper {
.ant-table-thead {
tr > th {
@@ -136,3 +138,23 @@
gap: 8px;
}
}
+
+// Setting the background color of the resizable column to where dragger is located
+.ant-table.ant-table-bordered {
+ > .ant-table-container {
+ > .ant-table-content,
+ > .ant-table-header,
+ > .ant-table-body,
+ > .ant-table-summary {
+ > table {
+ > thead {
+ > tr {
+ > .resizable-container::before {
+ background-color: @border-color !important;
+ }
+ }
+ }
+ }
+ }
+ }
+}