Skip to content

Fixing not needed horizontal scrollbar in EntityDataTable for tables that have no actions column. #26895

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
linuspahl merged 3 commits into from
Aug 6, 2026
Merged

Fixing not needed horizontal scrollbar in EntityDataTable for tables that have no actions column. #26895

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
443eb1b
Ensure resize handle does not result in scrollbar when there is no ac…
linuspahl Aug 5, 2026
2291e0b
Ensure table borders do not cause scrollbar when there is no actions …
linuspahl Aug 5, 2026
7ebdcff
Improve positioning of resize handle.
linuspahl Aug 5, 2026
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
2 changes: 2 additions & 0 deletions graylog2-web-interface/src/components/common/EntityDataTable/Constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ export const BULK_SELECT_COL_ID = 'bulk-select';

export const ACTIONS_COL_ID = 'actions';

export const RESIZE_HIT_AREA_OVERHANG = 7;

export const UTILITY_COLUMNS = new Set([BULK_SELECT_COL_ID, ACTIONS_COL_ID]);

export const ATTRIBUTE_STATUS = {
Expand Down
1 change: 1 addition & 0 deletions graylog2-web-interface/src/components/common/EntityDataTable/EntityDataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -355,6 +355,7 @@ const EntityDataTable = <Entity extends EntityBase, Meta = unknown>({
$scrollContainerWidth={scrollContainerWidth}>
<InnerContainer>
<Table<Entity>
columnWidths={columnWidths}
expandedSectionRenderers={expandedSectionRenderers}
headerGroups={headerGroups}
rowOverride={rowOverride}
Expand Down
28 changes: 26 additions & 2 deletions graylog2-web-interface/src/components/common/EntityDataTable/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,13 @@ const StyledTable = styled(BaseTable)(

const Td = styled.td<{
$colId: string;
$hideEmptyTailBorder: boolean;
$hidePadding: boolean;
$isLastVisibleColumn: boolean;
$pinningPosition: ColumnPinningPosition;
$textAlign: string;
}>(
({ $colId, $hidePadding, $pinningPosition, $textAlign }) => css`
({ $colId, $hideEmptyTailBorder, $hidePadding, $isLastVisibleColumn, $pinningPosition, $textAlign, theme }) => css`
word-break: break-word;
${$textAlign &&
css`
Expand Down Expand Up @@ -94,17 +96,33 @@ const Td = styled.td<{
padding: 0;
}
`}

${$hideEmptyTailBorder &&
css`
&&& {
border-right: none;
}
`}

${$isLastVisibleColumn &&
css`
&& {
border-right-color: ${theme.colors.table.row.divider};
}
`}
`,
);

type Props<Entity extends EntityBase> = {
columnWidths: { [colId: string]: number };
expandedSectionRenderers: ExpandedSectionRenderers<Entity> | undefined;
rowOverride?: RowOverride<Entity>;
headerGroups: Array<HeaderGroup<Entity>>;
rows: Array<Row<Entity>>;
};

const Table = <Entity extends EntityBase>({
columnWidths,
expandedSectionRenderers,
rowOverride = undefined,
headerGroups,
Expand All @@ -114,9 +132,13 @@ const Table = <Entity extends EntityBase>({

const isRowExpanded = (rowId: string) => !!expandedSections?.[rowId];

const isTailColumnEmpty = !columnWidths[ACTIONS_COL_ID];
const leafHeaders = headerGroups[headerGroups.length - 1]?.headers ?? [];
const lastVisibleColumnId = isTailColumnEmpty ? leafHeaders[leafHeaders.length - 2]?.column.id : undefined;

return (
<StyledTable condensed bordered>
<TableHead headerGroups={headerGroups} />
<TableHead columnWidths={columnWidths} headerGroups={headerGroups} />
{rows.map((row) => {
const visibleCells = row.getVisibleCells();
const visibleCellCount = visibleCells.length;
Expand All @@ -127,6 +149,8 @@ const Table = <Entity extends EntityBase>({
<Td
key={cell.id}
$colId={cell.column.id}
$hideEmptyTailBorder={cell.column.id === ACTIONS_COL_ID && isTailColumnEmpty}
$isLastVisibleColumn={cell.column.id === lastVisibleColumnId}
$pinningPosition={cell.column.getIsPinned()}
$hidePadding={columnMeta?.hideCellPadding}
$textAlign={columnMeta?.columnRenderer?.textAlign}>
Expand Down
87 changes: 67 additions & 20 deletions graylog2-web-interface/src/components/common/EntityDataTable/TableHead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
columnTransition,
displayScrollRightIndicatorVar,
} from 'components/common/EntityDataTable/CSSVariables';
import { ACTIONS_COL_ID } from 'components/common/EntityDataTable/Constants';
import { ACTIONS_COL_ID, RESIZE_HIT_AREA_OVERHANG } from 'components/common/EntityDataTable/Constants';
import ScrollShadow from 'theme/box-shadows/ScrollShadow';
import useForceUpdate from 'util/hooks/useForceUpdate';
import zIndices from 'theme/z-indices';
Expand All @@ -46,12 +46,23 @@ const Thead = styled.thead(

export const Th = styled.th<{
$colId: string;
$hideEmptyTailBorder: boolean;
$hideEmptyTailPinShadow: boolean;
$hidePadding: boolean;
$pinningPosition: ColumnPinningPosition;
$revealHeaderActions: boolean;
$zIndex: number;
}>(
({ $colId, $hidePadding, $pinningPosition, $revealHeaderActions, $zIndex, theme }) => css`
({
$colId,
$hideEmptyTailBorder,
$hideEmptyTailPinShadow,
$hidePadding,
$pinningPosition,
$revealHeaderActions,
$zIndex,
theme,
}) => css`
position: relative;
padding: 0 !important;
z-index: ${$pinningPosition ? zIndices.tableHeaderCellPinned : $zIndex};
Expand All @@ -78,6 +89,7 @@ export const Th = styled.th<{
position: sticky;
${$pinningPosition === 'left' ? 'left' : 'right'}: 0;
${$pinningPosition === 'right' &&
!$hideEmptyTailPinShadow &&
css`
box-shadow: inset -1px 0 0 ${theme.colors.table.row.divider};
`}
Expand All @@ -99,16 +111,23 @@ export const Th = styled.th<{
display: var(${displayScrollRightIndicatorVar}, none);
}
`}

${$hideEmptyTailBorder &&
css`
&& {
border-right: none;
}
`}
`,
);

const ResizeHitArea = styled.div<{ $isResizing: boolean }>(
({ theme, $isResizing }) => css`
const ResizeHitArea = styled.div<{ $isResizing: boolean; $constrainOverhang: boolean }>(
({ theme, $isResizing, $constrainOverhang }) => css`
position: absolute;
top: 0;
bottom: 0;
right: -7px;
width: 14px;
right: ${$constrainOverhang ? 0 : -RESIZE_HIT_AREA_OVERHANG}px;
width: ${RESIZE_HIT_AREA_OVERHANG * ($constrainOverhang ? 1 : 2)}px;
cursor: col-resize;
touch-action: none;
user-select: none;
Expand All @@ -119,12 +138,18 @@ const ResizeHitArea = styled.div<{ $isResizing: boolean }>(
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
transform: translateX(-50%);
background-color: ${theme.colors.variant.info};
opacity: ${$isResizing ? 1 : 0};
transition: opacity 0.15s ease-in-out;
${$constrainOverhang
? css`
right: -2px;
`
: css`
left: 50%;
`};
}

&:hover::after {
Expand All @@ -141,8 +166,17 @@ const ResizeCursorGlobalStyle = createGlobalStyle`
}
`;

const TableHeaderCell = <Entity extends EntityBase>({ header }: { header: Header<Entity, unknown> }) => {
const TableHeaderCell = <Entity extends EntityBase>({
header,
isTailColumnEmpty,
constrainResizeOverhang,
}: {
header: Header<Entity, unknown>;
isTailColumnEmpty: boolean;
constrainResizeOverhang: boolean;
}) => {
const columnMeta = header.column.columnDef.meta as ColumnMetaContext<Entity>;
const isActionsColumn = header.column.id === ACTIONS_COL_ID;
const forceUpdate = useForceUpdate();
const [isHoveringResizeHandle, setIsHoveringResizeHandle] = useState(false);

Expand Down Expand Up @@ -170,6 +204,8 @@ const TableHeaderCell = <Entity extends EntityBase>({ header }: { header: Header
key={header.id}
colSpan={header.colSpan}
$colId={header.column.id}
$hideEmptyTailBorder={isActionsColumn && isTailColumnEmpty}
$hideEmptyTailPinShadow={isActionsColumn && !header.column.columnDef.header}
$hidePadding={columnMeta?.hideCellPadding}
$pinningPosition={header.column.getIsPinned()}
$zIndex={zIndices.tableHeaderCell - header.index}
Expand All @@ -182,6 +218,7 @@ const TableHeaderCell = <Entity extends EntityBase>({ header }: { header: Header
onMouseEnter={() => setIsHoveringResizeHandle(true)}
onMouseLeave={() => setIsHoveringResizeHandle(false)}
$isResizing={header.column.getIsResizing()}
$constrainOverhang={constrainResizeOverhang}
role="separator"
aria-label={`Resize ${columnMeta?.label ?? header.column.id} column`}
title={`Resize ${columnMeta?.label ?? header.column.id} column`}
Expand All @@ -192,20 +229,30 @@ const TableHeaderCell = <Entity extends EntityBase>({ header }: { header: Header
};

type Props<Entity extends EntityBase> = {
columnWidths: { [colId: string]: number };
headerGroups: Array<HeaderGroup<Entity>>;
};

const TableHead = <Entity extends EntityBase>({ headerGroups }: Props<Entity>) => (
<Thead>
<ResizeCursorGlobalStyle />
{headerGroups.map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHeaderCell key={header.id} header={header} />
))}
</tr>
))}
</Thead>
);
const TableHead = <Entity extends EntityBase>({ columnWidths, headerGroups }: Props<Entity>) => {
const isTailColumnEmpty = !columnWidths[ACTIONS_COL_ID];

return (
<Thead>
<ResizeCursorGlobalStyle />
{headerGroups.map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header, index) => (
<TableHeaderCell
key={header.id}
header={header}
isTailColumnEmpty={isTailColumnEmpty}
constrainResizeOverhang={isTailColumnEmpty && index === headerGroup.headers.length - 2}
/>
))}
</tr>
))}
</Thead>
);
};

export default TableHead;
Loading