Skip to content

Commit be870f7

Browse files
AdamGohsAdamGohs
committed
Update TableVersionHistory.js
Aligned all header columns to the left and created a global CELL style for the TableVersionHistory component and assigned it to all table columns. This replaces the individual style={{ textAlign: 'left', verticalAlign: 'top' }} entries for each column and standardizes the formatting.
1 parent a681a57 commit be870f7

1 file changed

Lines changed: 97 additions & 100 deletions

File tree

‎src/components/TableVersionHistory.js‎

Lines changed: 97 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,127 @@
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";
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';
66

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

1414
// Hard-coded headers, widths, and alignments
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 = ["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' };
1819

19-
const get = (arr, i) => (Array.isArray(arr) ? arr[i] : undefined) ?? "";
20+
const get = (arr, i) => (Array.isArray(arr) ? arr[i] : undefined) ?? '';
2021
const normalizeVersion = (value) => {
21-
if (!value) return "";
22-
return value.startsWith("v") ? value : `v${value}`;
22+
if (!value) return '';
23+
return value.startsWith('v') ? value : `v${value}`;
2324
};
2425
const buildVersionHistoryHref = (value) => {
25-
if (!documentPath || !value) return "";
26+
if (!documentPath || !value) return '';
2627
const version = normalizeVersion(value);
2728
return `/docs/${documentPath}/${version}/version-history`;
2829
};
2930

3031
return (
3132
<div className="table-container">
3233
<div className="table-scroller">
33-
<table className="table-base table-zebra" aria-label="Version History" style={{ tableLayout: "fixed", "--table-min-width": "720px" }}>
34-
{/* Column sizing */}
35-
<colgroup>
36-
{COL_WIDTHS.map((w, i) => (
37-
<col key={i} style={{ width: w }} />
38-
))}
39-
</colgroup>
40-
41-
<thead>
42-
<tr>
43-
{HEADERS.map((h, i) => (
44-
<th key={h} className="border table-header" style={{ textAlign: HEADERS_ALIGN[i] }}>
45-
{h}
46-
</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 }} />
4739
))}
48-
</tr>
49-
</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>
5051

51-
<tbody>
52-
{Array.from({ length: rowCount }).map((_, rowIndex) => {
53-
const v = get(versions, rowIndex);
54-
const d = get(dates, rowIndex);
55-
const ds = get(descriptions, rowIndex);
56-
const m = get(modifiedBy, rowIndex);
57-
const r = get(reviewedBy, rowIndex);
58-
const a = get(approvedBy, rowIndex);
59-
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);
6061

61-
return (
62-
<tr key={rowIndex}>
63-
{/* Version (col 0) */}
64-
<td className="border table-body-cell table-cell-nowrap" style={{ textAlign: "left", verticalAlign: "top"}} title={v}>
65-
{versionHref ? (
66-
<Link
67-
to={useBaseUrl(versionHref)}
68-
className="no-underline text-ifm-link hover:text-ifm-link-hover hover:underline"
69-
>
70-
{v}
71-
</Link>
72-
) : (
73-
v
74-
)}
75-
</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>
7674

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

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

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

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

119-
{/* Approved By (col 5) */}
120-
<td className="border table-body-cell table-cell-nowrap" style={{ textAlign: "left", verticalAlign: "top"}} title={a}>
121-
{a}
122-
</td>
123-
</tr>
124-
);
125-
})}
126-
</tbody>
127-
</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>
128125
</div>
129126
</div>
130127
);

0 commit comments

Comments
 (0)