0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added maxWidth to the table row styles (#1810)

Browse source 
* Added new styles to table cells
* Styled td component moved to TableHeaderCell.styled

Co-authored-by: k.morozov <k.morozov@ffin.ru>
This commit is contained in:
Kirill Morozov 2022-04-07 16:28:18 +03:00 • committed by GitHub
parent 8d10eb69e8
commit 161b8a7238
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
kafka-ui-react-app/src/components/Topics/List/List.tsx
View file

@ -318,7 +318,7 @@ const List: React.FC<TopicsListProps> = ({
hoverable hoverable
> >
<TableColumn <TableColumn
width="44%" maxWidth="350px"
title="Topic Name" title="Topic Name"
cell={TitleCell} cell={TitleCell}
orderValue={TopicColumnsToSort.NAME} orderValue={TopicColumnsToSort.NAME}
@ -341,7 +341,7 @@ const List: React.FC<TopicsListProps> = ({
orderValue={TopicColumnsToSort.SIZE} orderValue={TopicColumnsToSort.SIZE}
/> />
<TableColumn <TableColumn
width="4%" maxWidth="4%"
className="topic-action-block" className="topic-action-block"
cell={ActionsCell} cell={ActionsCell}
/> />

2
kafka-ui-react-app/src/components/common/SmartTable/TableColumn.tsx
View file

@ -33,7 +33,7 @@ interface TableColumnProps<T, TId extends IdType, OT = never> {
headerCell?: React.FC<TableHeaderCellProps<T, TId, OT>>; headerCell?: React.FC<TableHeaderCellProps<T, TId, OT>>;
field?: string; field?: string;
title?: string; title?: string;
width?: string; maxWidth?: string;
className?: string; className?: string;
orderValue?: OT; orderValue?: OT;
} }

11
kafka-ui-react-app/src/components/common/SmartTable/TableRow.tsx
View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { propertyLookup } from 'lib/propertyLookup'; import { propertyLookup } from 'lib/propertyLookup';
import { TableState } from 'lib/hooks/useTableState'; import { TableState } from 'lib/hooks/useTableState';
import { Td } from 'components/common/table/TableHeaderCell/TableHeaderCell.styled';
import { isColumnElement, SelectCell, TableCellProps } from './TableColumn'; import { isColumnElement, SelectCell, TableCellProps } from './TableColumn';
@ -61,23 +62,23 @@ export const TableRow = <T, TId extends IdType, OT = never>({
if (!isColumnElement<T, TId>(child)) { if (!isColumnElement<T, TId>(child)) {
return child; return child;
} }
const { cell, field, width, className } = child.props; const { cell, field, maxWidth, className } = child.props;
const Cell = cell as React.FC<TableCellProps<T, TId, OT>> | undefined; const Cell = cell as React.FC<TableCellProps<T, TId, OT>> | undefined;
return Cell ? ( return Cell ? (
<td className={className} style={{ width }}> <Td className={className} maxWidth={maxWidth}>
<Cell <Cell
tableState={tableState} tableState={tableState}
hovered={hovered} hovered={hovered}
rowIndex={index} rowIndex={index}
dataItem={dataItem} dataItem={dataItem}
/> />
</td> </Td>
) : ( ) : (
<td className={className} style={{ width }}> <Td className={className} maxWidth={maxWidth}>
{field && propertyLookup(field, dataItem)} {field && propertyLookup(field, dataItem)}
</td> </Td>
); );
})} })}
</tr> </tr>

6
kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts
View file

@ -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<TitleProps>( export const Title = styled.span<TitleProps>(
({ isOrderable, isOrdered, sortOrder, theme: { table } }) => css` ({ isOrderable, isOrdered, sortOrder, theme: { table } }) => css`
font-family: Inter, sans-serif; font-family: Inter, sans-serif;