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

Add scrollable wrapper to the new table component (#2692)

Browse source
This commit is contained in:
Oleg Shur 2022-10-02 14:38:36 +03:00 • committed by GitHub
parent 55c8d6ac2d
commit 8731de1520
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 96 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
kafka-ui-react-app/src/components/App.styled.ts
View file

@ -20,9 +20,10 @@ export const Container = styled.main(
position: relative;
padding-bottom: 30px;
z-index: 20;
max-width: calc(100vw - ${theme.layout.navBarWidth});
@media screen and (max-width: 1023px) {
margin-left: initial;
max-width: 100vw;
}
`
);

2
kafka-ui-react-app/src/components/Brokers/Broker/Configs/Configs.styled.ts
View file

@ -12,7 +12,7 @@ export const Value = styled.span`
line-height: 24px;
margin-right: 10px;
text-overflow: ellipsis;
width: 600px;
max-width: 400px;
overflow: hidden;
white-space: nowrap;
`;

2
kafka-ui-react-app/src/components/Brokers/Broker/Configs/InputCell.tsx
View file

@ -70,7 +70,7 @@ const InputCell: React.FC<InputCellProps> = ({ row, getValue, onUpdate }) => {
: { fontWeight: 400 }
}
>
<S.Value>{initialValue}</S.Value>
<S.Value title={initialValue}>{initialValue}</S.Value>
<Button
buttonType="primary"
buttonSize="S"

6
kafka-ui-react-app/src/components/Topics/Topic/MessagesV2/Messages.styled.ts
View file

@ -14,7 +14,7 @@ export const Wrapper = styled.div(
export const Sidebar = styled.div(
({ theme }) => css`
width: 300px;
width: ${theme.layout.filtersSidebarWidth};
position: sticky;
top: ${theme.layout.navBarHeight};
align-self: start;
@ -27,7 +27,9 @@ export const SidebarContent = styled.div`
export const TableWrapper = styled.div(
({ theme }) => css`
width: 100%;
width: calc(
100vw - ${theme.layout.navBarWidth} - ${theme.layout.filtersSidebarWidth}
);
border-left: 1px solid ${theme.layout.stuffBorderColor};
`
);

4
kafka-ui-react-app/src/components/common/NewTable/Table.styled.ts
View file

@ -211,3 +211,7 @@ export const Ellipsis = styled.div`
text-overflow: ellipsis;
display: block;
`;
export const TableWrapper = styled.div`
overflow-x: auto;
`;

164
kafka-ui-react-app/src/components/common/NewTable/Table.tsx
View file

@ -198,95 +198,97 @@ const Table: React.FC<TableProps<any>> = ({
/>
</S.TableActionsBar>
)}
<S.Table>
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{!!enableRowSelection && (
<S.Th key={`${headerGroup.id}-select`}>
{flexRender(
SelectRowHeader,
headerGroup.headers[0].getContext()
)}
</S.Th>
)}
{table.getCanSomeRowsExpand() && (
<S.Th expander key={`${headerGroup.id}-expander`} />
)}
{headerGroup.headers.map((header) => (
<S.Th
key={header.id}
colSpan={header.colSpan}
sortable={header.column.getCanSort()}
sortOrder={header.column.getIsSorted()}
onClick={header.column.getToggleSortingHandler()}
>
<div>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
</div>
</S.Th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<React.Fragment key={row.id}>
<S.Row
expanded={row.getIsExpanded()}
onClick={handleRowClick(row)}
clickable={
!enableRowSelection &&
(row.getCanExpand() || onRowClick !== undefined)
}
>
<S.TableWrapper>
<S.Table>
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{!!enableRowSelection && (
<td key={`${row.id}-select`} style={{ width: '1px' }}>
<S.Th key={`${headerGroup.id}-select`}>
{flexRender(
SelectRowCell,
row.getVisibleCells()[0].getContext()
SelectRowHeader,
headerGroup.headers[0].getContext()
)}
</td>
</S.Th>
)}
{table.getCanSomeRowsExpand() && (
<td key={`${row.id}-expander`} style={{ width: '1px' }}>
{flexRender(
ExpanderCell,
row.getVisibleCells()[0].getContext()
)}
</td>
<S.Th expander key={`${headerGroup.id}-expander`} />
)}
{row
.getVisibleCells()
.map(({ id, getContext, column: { columnDef } }) => (
<td key={id} style={columnDef.meta}>
{flexRender(columnDef.cell, getContext())}
{headerGroup.headers.map((header) => (
<S.Th
key={header.id}
colSpan={header.colSpan}
sortable={header.column.getCanSort()}
sortOrder={header.column.getIsSorted()}
onClick={header.column.getToggleSortingHandler()}
>
<div>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
</div>
</S.Th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<React.Fragment key={row.id}>
<S.Row
expanded={row.getIsExpanded()}
onClick={handleRowClick(row)}
clickable={
!enableRowSelection &&
(row.getCanExpand() || onRowClick !== undefined)
}
>
{!!enableRowSelection && (
<td key={`${row.id}-select`} style={{ width: '1px' }}>
{flexRender(
SelectRowCell,
row.getVisibleCells()[0].getContext()
)}
</td>
))}
</S.Row>
{row.getIsExpanded() && SubComponent && (
<S.Row expanded>
<td colSpan={row.getVisibleCells().length + 2}>
<S.ExpandedRowInfo>
<SubComponent row={row} />
</S.ExpandedRowInfo>
</td>
)}
{table.getCanSomeRowsExpand() && (
<td key={`${row.id}-expander`} style={{ width: '1px' }}>
{flexRender(
ExpanderCell,
row.getVisibleCells()[0].getContext()
)}
</td>
)}
{row
.getVisibleCells()
.map(({ id, getContext, column: { columnDef } }) => (
<td key={id} style={columnDef.meta}>
{flexRender(columnDef.cell, getContext())}
</td>
))}
</S.Row>
)}
</React.Fragment>
))}
{table.getRowModel().rows.length === 0 && (
<S.Row>
<S.EmptyTableMessageCell colSpan={100}>
{emptyMessage || 'No rows found'}
</S.EmptyTableMessageCell>
</S.Row>
)}
</tbody>
</S.Table>
{row.getIsExpanded() && SubComponent && (
<S.Row expanded>
<td colSpan={row.getVisibleCells().length + 2}>
<S.ExpandedRowInfo>
<SubComponent row={row} />
</S.ExpandedRowInfo>
</td>
</S.Row>
)}
</React.Fragment>
))}
{table.getRowModel().rows.length === 0 && (
<S.Row>
<S.EmptyTableMessageCell colSpan={100}>
{emptyMessage || 'No rows found'}
</S.EmptyTableMessageCell>
</S.Row>
)}
</tbody>
</S.Table>
</S.TableWrapper>
{table.getPageCount() > 1 && (
<S.Pagination>
<S.Pages>

1
kafka-ui-react-app/src/theme/theme.ts
View file

@ -90,6 +90,7 @@ const theme = {
navBarWidth: '201px',
navBarHeight: '53px',
rightSidebarWidth: '70vw',
filtersSidebarWidth: '300px',
stuffColor: Colors.neutral[5],
stuffBorderColor: Colors.neutral[10],