Skip to content

Commit f8c4c6f

Browse files
AdamGohsAdamGohs
authored
Merge pull request #134 from USACE-RMC/fix/table-version-history-alignment
Added verticalAlign: "top" to all columns of Version History table
2 parents a7e62b0 + be870f7 commit f8c4c6f

1 file changed

Lines changed: 97 additions & 101 deletions

File tree

‎src/components/TableVersionHistory.js‎

Lines changed: 97 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,131 +1,127 @@
1-
import React from "react";
2-
import Link from "@docusaurus/Link";
3-
import useBaseUrl from "@docusaurus/useBaseUrl";
4-
import { useLocation } from "@docusaurus/router";
5-
import "../css/custom.css";
6-
import "../css/tables.css";
1+
import Link from '@docusaurus/Link';
2+
import { useLocation } from '@docusaurus/router';
3+
import useBaseUrl from '@docusaurus/useBaseUrl';
4+
import '../css/custom.css';
5+
import '../css/tables.css';
76

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

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

20-
const get = (arr, i) => (Array.isArray(arr) ? arr[i] : undefined) ?? "";
20+
const get = (arr, i) => (Array.isArray(arr) ? arr[i] : undefined) ?? '';
2121
const normalizeVersion = (value) => {
22-
if (!value) return "";
23-
return value.startsWith("v") ? value : `v${value}`;
22+
if (!value) return '';
23+
return value.startsWith('v') ? value : `v${value}`;
2424
};
2525
const buildVersionHistoryHref = (value) => {
26-
if (!documentPath || !value) return "";
26+
if (!documentPath || !value) return '';
2727
const version = normalizeVersion(value);
2828
return `/docs/${documentPath}/${version}/version-history`;
2929
};
3030

3131
return (
3232
<div className="table-container">
3333
<div className="table-scroller">
34-
<table className="table-base table-zebra" aria-label="Version History" style={{ tableLayout: "fixed", "--table-min-width": "720px" }}>
35-
{/* Column sizing */}
36-
<colgroup>
37-
{COL_WIDTHS.map((w, i) => (
38-
<col key={i} style={{ width: w }} />
39-
))}
40-
</colgroup>
41-
42-
<thead>
43-
<tr>
44-
{HEADERS.map((h, i) => (
45-
<th key={h} className="table-header border" style={{ textAlign: HEADERS_ALIGN[i] }}>
46-
{h}
47-
</th>
34+
<table className="table-base table-zebra" aria-label="Version History" style={{ tableLayout: 'fixed', '--table-min-width': '720px' }}>
35+
{/* Column sizing */}
36+
<colgroup>
37+
{COL_WIDTHS.map((w, i) => (
38+
<col key={i} style={{ width: w }} />
4839
))}
49-
</tr>
50-
</thead>
40+
</colgroup>
41+
42+
<thead>
43+
<tr>
44+
{HEADERS.map((h, i) => (
45+
<th key={h} className="table-header border" style={{ textAlign: HEADERS_ALIGN[i] }}>
46+
{h}
47+
</th>
48+
))}
49+
</tr>
50+
</thead>
5151

52-
<tbody>
53-
{Array.from({ length: rowCount }).map((_, rowIndex) => {
54-
const v = get(versions, rowIndex);
55-
const d = get(dates, rowIndex);
56-
const ds = get(descriptions, rowIndex);
57-
const m = get(modifiedBy, rowIndex);
58-
const r = get(reviewedBy, rowIndex);
59-
const a = get(approvedBy, rowIndex);
60-
const versionHref = buildVersionHistoryHref(v);
52+
<tbody>
53+
{Array.from({ length: rowCount }).map((_, rowIndex) => {
54+
const v = get(versions, rowIndex);
55+
const d = get(dates, rowIndex);
56+
const ds = get(descriptions, rowIndex);
57+
const m = get(modifiedBy, rowIndex);
58+
const r = get(reviewedBy, rowIndex);
59+
const a = get(approvedBy, rowIndex);
60+
const versionHref = buildVersionHistoryHref(v);
6161

62-
return (
63-
<tr key={rowIndex}>
64-
{/* Version (col 0) */}
65-
<td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "center" }} title={v}>
66-
{versionHref ? (
67-
<Link
68-
to={useBaseUrl(versionHref)}
69-
className="text-ifm-link hover:text-ifm-link-hover no-underline hover:underline"
70-
>
71-
{v}
72-
</Link>
73-
) : (
74-
v
75-
)}
76-
</td>
62+
return (
63+
<tr key={rowIndex}>
64+
{/* Version (col 0) */}
65+
<td className="table-body-cell table-cell-nowrap border" style={CELL} title={v}>
66+
{versionHref ? (
67+
<Link to={useBaseUrl(versionHref)} className="text-ifm-link no-underline hover:text-ifm-link-hover hover:underline">
68+
{v}
69+
</Link>
70+
) : (
71+
v
72+
)}
73+
</td>
7774

78-
{/* Date (col 1) */}
79-
<td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "left" }} title={d}>
80-
{d}
81-
</td>
75+
{/* Date (col 1) */}
76+
<td className="table-body-cell table-cell-nowrap border" style={CELL} title={d}>
77+
{d}
78+
</td>
8279

83-
{/* Description (col 2) */}
84-
<td
85-
className="table-body-cell border"
86-
style={{
87-
textAlign: "left",
88-
verticalAlign: "top",
89-
whiteSpace: "normal",
90-
overflowWrap: "anywhere",
91-
wordBreak: "break-word",
92-
hyphens: "auto",
93-
}}
94-
>
95-
{Array.isArray(ds) ? (
96-
ds.length > 1 ? (
97-
<ul className="list-disc pl-5 m-0">
98-
{ds.map((item, i) => (
99-
<li key={i}>{item}</li>
100-
))}
101-
</ul>
80+
{/* Description (col 2) */}
81+
<td
82+
className="table-body-cell border"
83+
style={{
84+
...CELL,
85+
whiteSpace: 'normal',
86+
overflowWrap: 'anywhere',
87+
wordBreak: 'break-word',
88+
hyphens: 'auto',
89+
}}
90+
>
91+
{Array.isArray(ds) ? (
92+
ds.length > 1 ? (
93+
<ul className="m-0 list-disc pl-5">
94+
{ds.map((item, i) => (
95+
<li key={i}>{item}</li>
96+
))}
97+
</ul>
98+
) : (
99+
ds[0] || ''
100+
)
102101
) : (
103-
ds[0] || ""
104-
)
105-
) : (
106-
ds
107-
)}
108-
</td>
102+
ds
103+
)}
104+
</td>
109105

110-
{/* Modified By (col 3) */}
111-
<td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "left" }} title={m}>
112-
{m}
113-
</td>
106+
{/* Modified By (col 3) */}
107+
<td className="table-body-cell table-cell-nowrap border" style={CELL} title={m}>
108+
{m}
109+
</td>
114110

115-
{/* Reviewed By (col 4) */}
116-
<td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "left" }} title={r}>
117-
{r}
118-
</td>
111+
{/* Reviewed By (col 4) */}
112+
<td className="table-body-cell table-cell-nowrap border" style={CELL} title={r}>
113+
{r}
114+
</td>
119115

120-
{/* Approved By (col 5) */}
121-
<td className="table-body-cell border table-cell-nowrap" style={{ textAlign: "left" }} title={a}>
122-
{a}
123-
</td>
124-
</tr>
125-
);
126-
})}
127-
</tbody>
128-
</table>
116+
{/* Approved By (col 5) */}
117+
<td className="table-body-cell table-cell-nowrap border" style={CELL} title={a}>
118+
{a}
119+
</td>
120+
</tr>
121+
);
122+
})}
123+
</tbody>
124+
</table>
129125
</div>
130126
</div>
131127
);

0 commit comments

Comments
 (0)