diff --git a/kafka-ui-react-app/src/components/Topics/List/List.tsx b/kafka-ui-react-app/src/components/Topics/List/List.tsx index f3f42cdc80..4858da2d2a 100644 --- a/kafka-ui-react-app/src/components/Topics/List/List.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx @@ -318,7 +318,7 @@ const List: React.FC = ({ hoverable > = ({ orderValue={TopicColumnsToSort.SIZE} /> diff --git a/kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx b/kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx index 96d7280547..c58c7d67b0 100644 --- a/kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx +++ b/kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx @@ -33,7 +33,7 @@ interface TableColumnProps { headerCell?: React.FC>; field?: string; title?: string; - width?: string; + maxWidth?: string; className?: string; orderValue?: OT; } diff --git a/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx b/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx index 14a8979727..1a2785b170 100644 --- a/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx +++ b/kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { propertyLookup } from 'lib/propertyLookup'; import { TableState } from 'lib/hooks/useTableState'; +import { Td } from 'components/common/table/TableHeaderCell/TableHeaderCell.styled'; import { isColumnElement, SelectCell, TableCellProps } from './TableColumn'; @@ -61,23 +62,23 @@ export const TableRow = ({ if (!isColumnElement(child)) { return child; } - const { cell, field, width, className } = child.props; + const { cell, field, maxWidth, className } = child.props; const Cell = cell as React.FC> | undefined; return Cell ? ( - + - + ) : ( - + {field && propertyLookup(field, dataItem)} - + ); })} diff --git a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts b/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts index 44ad528457..1e35e7d1a5 100644 --- a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts +++ b/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts @@ -67,6 +67,12 @@ const DESCMixin = css( ` ); +export const Td = styled.td<{ maxWidth?: string }>` + overflow: hidden; + text-overflow: ellipsis; + max-width: ${(props) => props.maxWidth}; +`; + export const Title = styled.span( ({ isOrderable, isOrdered, sortOrder, theme: { table } }) => css` font-family: Inter, sans-serif;