Skip to content

Added verticalAlign: "top" to all columns of Version History table #134

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
AdamGohs merged 2 commits into from
Aug 26, 2026
Merged

Added verticalAlign: "top" to all columns of Version History table #134

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a681a57
Added verticalAlign: "top" to all columns of Version History table
karenmai-usace Aug 25, 2026
be870f7
Update TableVersionHistory.js
AdamGohs Aug 26, 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
198 changes: 97 additions & 101 deletions src/components/TableVersionHistory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,131 +1,127 @@
import React from "react";
import Link from "@docusaurus/Link";
import useBaseUrl from "@docusaurus/useBaseUrl";
import { useLocation } from "@docusaurus/router";
import "../css/custom.css";
import "../css/tables.css";
import Link from '@docusaurus/Link';
import { useLocation } from '@docusaurus/router';
import useBaseUrl from '@docusaurus/useBaseUrl';
import '../css/custom.css';
import '../css/tables.css';

const TableVersionHistory = ({ versions = [], dates = [], descriptions = [], modifiedBy = [], reviewedBy = [], approvedBy = [] }) => {
const rowCount = Math.max(versions.length, dates.length, descriptions.length, modifiedBy.length, reviewedBy.length, approvedBy.length);
const location = useLocation();
const pathname = location?.pathname || "";
const pathname = location?.pathname || '';
const docMatch = pathname.match(/\/docs\/(.+?)\/v\d+\.\d+\//);
const documentPath = docMatch ? docMatch[1] : "";
const documentPath = docMatch ? docMatch[1] : '';

// Hard-coded headers, widths, and alignments
const HEADERS = ["Version", "Date", "Description", "Modified By", "Reviewed By", "Approved By"];
const COL_WIDTHS = ["8%", "13%", "37%", "14%", "14%", "14%"];
const HEADERS_ALIGN = ["center", "left", "left", "left", "left", "left"];
const HEADERS = ['Version', 'Date', 'Description', 'Modified By', 'Reviewed By', 'Approved By'];
const COL_WIDTHS = ['8%', '13%', '37%', '14%', '14%', '14%'];
const HEADERS_ALIGN = ['left', 'left', 'left', 'left', 'left', 'left'];
const CELL = { textAlign: 'left', verticalAlign: 'top' };

const get = (arr, i) => (Array.isArray(arr) ? arr[i] : undefined) ?? "";
const get = (arr, i) => (Array.isArray(arr) ? arr[i] : undefined) ?? '';
const normalizeVersion = (value) => {
if (!value) return "";
return value.startsWith("v") ? value : `v${value}`;
if (!value) return '';
return value.startsWith('v') ? value : `v${value}`;
};
const buildVersionHistoryHref = (value) => {
if (!documentPath || !value) return "";
if (!documentPath || !value) return '';
const version = normalizeVersion(value);
return `/docs/${documentPath}/${version}/version-history`;
};

return (
<div className="table-container">
<div className="table-scroller">
<table className="table-base table-zebra" aria-label="Version History" style={{ tableLayout: "fixed", "--table-min-width": "720px" }}>
{/* Column sizing */}
<colgroup>
{COL_WIDTHS.map((w, i) => (
<col key={i} style={{ width: w }} />
))}
</colgroup>

<thead>
<tr>
{HEADERS.map((h, i) => (
<th key={h} className="table-header border" style={{ textAlign: HEADERS_ALIGN[i] }}>
{h}
</th>
<table className="table-base table-zebra" aria-label="Version History" style={{ tableLayout: 'fixed', '--table-min-width': '720px' }}>
{/* Column sizing */}
<colgroup>
{COL_WIDTHS.map((w, i) => (
<col key={i} style={{ width: w }} />
))}
</tr>
</thead>
</colgroup>

<thead>
<tr>
{HEADERS.map((h, i) => (
<th key={h} className="table-header border" style={{ textAlign: HEADERS_ALIGN[i] }}>
{h}
</th>
))}
</tr>
</thead>

<tbody>
{Array.from({ length: rowCount }).map((_, rowIndex) => {
const v = get(versions, rowIndex);
const d = get(dates, rowIndex);
const ds = get(descriptions, rowIndex);
const m = get(modifiedBy, rowIndex);
const r = get(reviewedBy, rowIndex);
const a = get(approvedBy, rowIndex);
const versionHref = buildVersionHistoryHref(v);
<tbody>
{Array.from({ length: rowCount }).map((_, rowIndex) => {
const v = get(versions, rowIndex);
const d = get(dates, rowIndex);
const ds = get(descriptions, rowIndex);
const m = get(modifiedBy, rowIndex);
const r = get(reviewedBy, rowIndex);
const a = get(approvedBy, rowIndex);
const versionHref = buildVersionHistoryHref(v);

return (
<tr key={rowIndex}>
{/* Version (col 0) */}
<td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "center" }} title={v}>
{versionHref ? (
<Link
to={useBaseUrl(versionHref)}
className="text-ifm-link hover:text-ifm-link-hover no-underline hover:underline"
>
{v}
</Link>
) : (
v
)}
</td>
return (
<tr key={rowIndex}>
{/* Version (col 0) */}
<td className="table-body-cell table-cell-nowrap border" style={CELL} title={v}>
{versionHref ? (
<Link to={useBaseUrl(versionHref)} className="text-ifm-link no-underline hover:text-ifm-link-hover hover:underline">
{v}
</Link>
) : (
v
)}
</td>

{/* Date (col 1) */}
<td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "left" }} title={d}>
{d}
</td>
{/* Date (col 1) */}
<td className="table-body-cell table-cell-nowrap border" style={CELL} title={d}>
{d}
</td>

{/* Description (col 2) */}
<td
className="table-body-cell border"
style={{
textAlign: "left",
verticalAlign: "top",
whiteSpace: "normal",
overflowWrap: "anywhere",
wordBreak: "break-word",
hyphens: "auto",
}}
>
{Array.isArray(ds) ? (
ds.length > 1 ? (
<ul className="list-disc pl-5 m-0">
{ds.map((item, i) => (
<li key={i}>{item}</li>
))}
</ul>
{/* Description (col 2) */}
<td
className="table-body-cell border"
style={{
...CELL,
whiteSpace: 'normal',
overflowWrap: 'anywhere',
wordBreak: 'break-word',
hyphens: 'auto',
}}
>
{Array.isArray(ds) ? (
ds.length > 1 ? (
<ul className="m-0 list-disc pl-5">
{ds.map((item, i) => (
<li key={i}>{item}</li>
))}
</ul>
) : (
ds[0] || ''
)
) : (
ds[0] || ""
)
) : (
ds
)}
</td>
ds
)}
</td>

{/* Modified By (col 3) */}
<td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "left" }} title={m}>
{m}
</td>
{/* Modified By (col 3) */}
<td className="table-body-cell table-cell-nowrap border" style={CELL} title={m}>
{m}
</td>

{/* Reviewed By (col 4) */}
<td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "left" }} title={r}>
{r}
</td>
{/* Reviewed By (col 4) */}
<td className="table-body-cell table-cell-nowrap border" style={CELL} title={r}>
{r}
</td>

{/* Approved By (col 5) */}
<td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "left" }} title={a}>
{a}
</td>
</tr>
);
})}
</tbody>
</table>
{/* Approved By (col 5) */}
<td className="table-body-cell table-cell-nowrap border" style={CELL} title={a}>
{a}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
);
Expand Down
Loading