Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

UI: Maintain header titles, remove "select all," "clear selection" options and selected item count from Select software table (#33301)

Browse Source 
## For #33277 

<img width="1046" height="821" alt="Screenshot 2025-09-22 at 4 26 20 PM"
src="https://github.com/user-attachments/assets/d2e20d88-9795-42c3-91de-d3e7f98b2b6e"
/>


- [x] QA'd all new/changed functionality manually

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
This commit is contained in:
jacobshandling
2025-09-23 09:55:18 -07:00
committed by GitHub
co-authored by Jacob Shandling
parent 477f3cbaec
commit 5893b8186b
5 changed files with 54 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/TableContainer/DataTable/DataTable.tsx
+46 -40
View File
@@ -80,6 +80,7 @@ interface IDataTableProps {
renderPagination?: () => JSX.Element | null;
setExportRows?: (rows: Row[]) => void;
onClearSelection?: () => void;
suppressHeaderActions?: boolean;
}
interface IHeaderGroup extends HeaderGroup {
@@ -126,6 +127,7 @@ const DataTable = ({
renderPagination,
setExportRows,
onClearSelection = noop,
suppressHeaderActions,
}: IDataTableProps): JSX.Element => {
// used to track the initial mount of the component.
const isInitialRender = useRef(true);
@@ -515,6 +517,47 @@ const DataTable = ({
"is-observer": isOnlyObserver,
});
const renderHeaderWithActions = () => (
<thead className="active-selection">
<tr {...headerGroups[0].getHeaderGroupProps()}>
<th
className="active-selection__checkbox"
{...headerGroups[0].headers[0].getHeaderProps(
headerGroups[0].headers[0].getSortByToggleProps({
title: null,
})
)}
>
{headerGroups[0].headers[0].render("Header")}
</th>
<th className="active-selection__container">
<div className="active-selection__inner">
{renderSelectedCount()}
<div className="active-selection__inner-left">
{secondarySelectActions && renderSecondarySelectActions()}
</div>
<div className="active-selection__inner-right">
{primarySelectAction && renderPrimarySelectAction()}
</div>
{toggleAllPagesSelected && renderAreAllSelected()}
{shouldRenderToggleAllPages && (
<Button
onClick={onToggleAllPagesClick}
variant="text-link"
className="light-text"
>
<>Select all matching {resultsTitle}</>
</Button>
)}
<Button onClick={onClearSelectionClick} variant="text-link">
Clear selection
</Button>
</div>
</th>
</tr>
</thead>
);
return (
<div className={baseClass}>
{isLoading && (
@@ -524,46 +567,9 @@ const DataTable = ({
)}
<div className="data-table data-table__wrapper">
<table className={tableStyles}>
{Object.keys(selectedRowIds).length !== 0 && (
<thead className="active-selection">
<tr {...headerGroups[0].getHeaderGroupProps()}>
<th
className="active-selection__checkbox"
{...headerGroups[0].headers[0].getHeaderProps(
headerGroups[0].headers[0].getSortByToggleProps({
title: null,
})
)}
>
{headerGroups[0].headers[0].render("Header")}
</th>
<th className="active-selection__container">
<div className="active-selection__inner">
{renderSelectedCount()}
<div className="active-selection__inner-left">
{secondarySelectActions && renderSecondarySelectActions()}
</div>
<div className="active-selection__inner-right">
{primarySelectAction && renderPrimarySelectAction()}
</div>
{toggleAllPagesSelected && renderAreAllSelected()}
{shouldRenderToggleAllPages && (
<Button
onClick={onToggleAllPagesClick}
variant="text-link"
className="light-text"
>
<>Select all matching {resultsTitle}</>
</Button>
)}
<Button onClick={onClearSelectionClick} variant="text-link">
Clear selection
</Button>
</div>
</th>
</tr>
</thead>
)}
{!suppressHeaderActions &&
Object.keys(selectedRowIds).length !== 0 &&
renderHeaderWithActions()}
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>