Skip to content

Improved Column Widths #1909

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

Open
labkey-alan wants to merge 14 commits into
base: develop
Choose a base branch
from
Open

Improved Column Widths #1909

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d29243c
Add getTextAlignClassName
labkey-alan Dec 17, 2025
19ef1d7
DefaultRenderer: remove unnecessary styling
labkey-alan Dec 17, 2025
978faad
Improve styling for read-only tables
labkey-alan Dec 17, 2025
5027437
GridColumn: Drop support for width/fixedWidth overrides
labkey-alan Dec 17, 2025
59face9
Update release notes
labkey-alan Dec 17, 2025
5e3322a
Update release notes
labkey-alan Dec 17, 2025
a783edd
Fix issue with locked column having a visible gap on the left
labkey-alan Dec 22, 2025
6117585
Fix issue with problematically long column names
labkey-alan Dec 22, 2025
8aa6134
DefaultRenderer: Fix issue with conditional formatting
labkey-alan Dec 22, 2025
2302941
Don't wrap expiration date columns
labkey-alan Dec 22, 2025
b4671d1
Only render LabelHelpTip if column has helpTipRenderer
labkey-alan Dec 22, 2025
4e61b54
Update test snapshots
labkey-alan Dec 22, 2025
9f20f71
EditableGrid: Fix right-aligned columns
labkey-alan Dec 23, 2025
f92acd2
EditableGrid: Simplify count col rendering
labkey-alan Dec 23, 2025
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
6 changes: 6 additions & 0 deletions packages/components/releaseNotes/components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
# @labkey/components
Components, models, actions, and utility functions for LabKey applications and pages

### version 7.?.?
*Released*: ?? December 2025
- GridColumn: remove width, fixedWidth properties
- Add css class for text align and getTextAlignClassName helper
- Grid: improve styling for columns

### version 7.5.0
*Released*: 22 December 2025
- Chart builder updates for per-series line type option
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { hasParameter, imageURL, toggleParameter } from './internal/url/ActionUR
import { encodeFormDataQuote } from './internal/url/utils';
import { Container } from './internal/components/base/models/Container';
import { hasAllPermissions, hasAnyPermissions, hasPermissions, User } from './internal/components/base/models/User';
import { GridColumn } from './internal/components/base/models/GridColumn';
import { getTextAlignClassName, GridColumn } from './internal/components/base/models/GridColumn';
import { decodePart, encodePart, getSchemaQuery, resolveKey, SchemaQuery } from './public/SchemaQuery';
import { insertColumnFilter, Operation, QueryColumn, QueryLookup } from './public/QueryColumn';
import { QuerySort } from './public/QuerySort';
Expand Down Expand Up @@ -1414,6 +1414,7 @@ export {
Grid,
GRID_CHECKBOX_OPTIONS,
GridAliquotViewSelector,
getTextAlignClassName,
GridColumn,
GridPanel,
GridPanelWithModel,
Expand Down
214 changes: 131 additions & 83 deletions packages/components/src/internal/components/__snapshots__/PreviewGrid.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ exports[`PreviewGrid render PreviewGrid with data 1`] = `
class="grid-messages"
/>
<table
class="table table-striped table-bordered"
class="read-only-table table table-striped table-bordered"
>
<thead>
<tr>
Expand All @@ -47,7 +47,11 @@ exports[`PreviewGrid render PreviewGrid with data 1`] = `
If not provided, a unique name will be generated from the expression:
null (Name)"
>
Name
<div
class="grid-header-cell__body"
>
Name
</div>
</th>
<th
class="grid-header-cell"
Expand All @@ -56,7 +60,11 @@ null (Name)"
id="Flag"
title="Contains a reference to a user-editable comment about this row (Flag)"
>
Flag
<div
class="grid-header-cell__body"
>
Flag
</div>
</th>
<th
class="grid-header-cell"
Expand All @@ -65,7 +73,11 @@ null (Name)"
id="mixtureTypeId"
title="mixtureTypeId"
>
Mixture Type
<div
class="grid-header-cell__body"
>
Mixture Type
</div>
</th>
<th
class="grid-header-cell"
Expand All @@ -74,7 +86,11 @@ null (Name)"
id="expirationTime"
title="The expiration period in days. (expirationTime)"
>
Expiration Time
<div
class="grid-header-cell__body"
>
Expiration Time
</div>
</th>
</tr>
</thead>
Expand All @@ -83,120 +99,138 @@ null (Name)"
class="grid-row-alternate"
>
<td
style="text-align: left;"
class="text-left"
>
<a
class="ws-pre-wrap"
href="/labkey/testContainer/experiment-showData.view?rowId=41426"
<div
class="table-cell-content"
>
DMEXP
</a>
<a
href="/labkey/testContainer/experiment-showData.view?rowId=41426"
>
DMEXP
</a>
</div>
</td>
<td
style="text-align: left;"
class="text-left"
>
<span
class="ws-pre-wrap"
<div
class="table-cell-content"
/>
</td>
<td
style="text-align: left;"
class="text-left"
>
<a
class="ws-pre-wrap"
href="/labkey/testContainer/list-details.view?listId=15&pk=2"
<div
class="table-cell-content"
>
Solution
</a>
<a
href="/labkey/testContainer/list-details.view?listId=15&pk=2"
>
Solution
</a>
</div>
</td>
<td
style="text-align: right;"
class="text-right"
>
<span
class="ws-pre-wrap"
<div
class="table-cell-content"
>
30
</span>
</div>
</td>
</tr>
<tr
class="grid-row"
>
<td
style="text-align: left;"
class="text-left"
>
<a
class="ws-pre-wrap"
href="/labkey/testContainer/experiment-showData.view?rowId=41425"
<div
class="table-cell-content"
>
TBS
</a>
<a
href="/labkey/testContainer/experiment-showData.view?rowId=41425"
>
TBS
</a>
</div>
</td>
<td
style="text-align: left;"
class="text-left"
>
<span
class="ws-pre-wrap"
<div
class="table-cell-content"
/>
</td>
<td
style="text-align: left;"
class="text-left"
>
<a
class="ws-pre-wrap"
href="/labkey/testContainer/list-details.view?listId=15&pk=2"
<div
class="table-cell-content"
>
Solution
</a>
<a
href="/labkey/testContainer/list-details.view?listId=15&pk=2"
>
Solution
</a>
</div>
</td>
<td
style="text-align: right;"
class="text-right"
>
<span
class="ws-pre-wrap"
<div
class="table-cell-content"
>
30
</span>
</div>
</td>
</tr>
<tr
class="grid-row-alternate"
>
<td
style="text-align: left;"
class="text-left"
>
<a
class="ws-pre-wrap"
href="/labkey/testContainer/experiment-showData.view?rowId=41424"
<div
class="table-cell-content"
>
PBS
</a>
<a
href="/labkey/testContainer/experiment-showData.view?rowId=41424"
>
PBS
</a>
</div>
</td>
<td
style="text-align: left;"
class="text-left"
>
<span
class="ws-pre-wrap"
<div
class="table-cell-content"
/>
</td>
<td
style="text-align: left;"
class="text-left"
>
<a
class="ws-pre-wrap"
href="/labkey/testContainer/list-details.view?listId=15&pk=2"
<div
class="table-cell-content"
>
Solution
</a>
<a
href="/labkey/testContainer/list-details.view?listId=15&pk=2"
>
Solution
</a>
</div>
</td>
<td
style="text-align: right;"
class="text-right"
>
<span
class="ws-pre-wrap"
<div
class="table-cell-content"
>
30
</span>
</div>
</td>
</tr>
</tbody>
Expand All @@ -221,7 +255,7 @@ exports[`PreviewGrid render PreviewGrid with different numCols and numRows 1`] =
class="grid-messages"
/>
<table
class="table table-striped table-bordered"
class="read-only-table table table-striped table-bordered"
>
<thead>
<tr>
Expand All @@ -234,7 +268,11 @@ exports[`PreviewGrid render PreviewGrid with different numCols and numRows 1`] =
If not provided, a unique name will be generated from the expression:
null (Name)"
>
Name
<div
class="grid-header-cell__body"
>
Name
</div>
</th>
<th
class="grid-header-cell"
Expand All @@ -243,7 +281,11 @@ null (Name)"
id="Flag"
title="Contains a reference to a user-editable comment about this row (Flag)"
>
Flag
<div
class="grid-header-cell__body"
>
Flag
</div>
</th>
</tr>
</thead>
Expand All @@ -252,41 +294,47 @@ null (Name)"
class="grid-row-alternate"
>
<td
style="text-align: left;"
class="text-left"
>
<a
class="ws-pre-wrap"
href="/labkey/testContainer/experiment-showData.view?rowId=41426"
<div
class="table-cell-content"
>
DMEXP
</a>
<a
href="/labkey/testContainer/experiment-showData.view?rowId=41426"
>
DMEXP
</a>
</div>
</td>
<td
style="text-align: left;"
class="text-left"
>
<span
class="ws-pre-wrap"
<div
class="table-cell-content"
/>
</td>
</tr>
<tr
class="grid-row"
>
<td
style="text-align: left;"
class="text-left"
>
<a
class="ws-pre-wrap"
href="/labkey/testContainer/experiment-showData.view?rowId=41425"
<div
class="table-cell-content"
>
TBS
</a>
<a
href="/labkey/testContainer/experiment-showData.view?rowId=41425"
>
TBS
</a>
</div>
</td>
<td
style="text-align: left;"
class="text-left"
>
<span
class="ws-pre-wrap"
<div
class="table-cell-content"
/>
</td>
</tr>
Expand Down
Loading