Skip to content

fix(skills): omit column widths by default in generated grid code #170

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
onlyexeption wants to merge 1 commit into
base: master
Choose a base branch
from
+18 −0
Open

fix(skills): omit column widths by default in generated grid code #170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions skills/igniteui-react-components/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,3 +178,4 @@ Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI n
6. **Handle events as `CustomEvent`** — not `React.SyntheticEvent`
7. **Use refs sparingly** — prefer declarative props
8. **Check slot names** in the docs
9. **Never add `width` to grid columns by default** — `IgrGridLiteColumn` defaults to `minmax(136px, 1fr)` (responsive) and `IgrColumn` auto-sizes. Adding explicit pixel widths leaves empty space and breaks responsiveness. Only set `width` when the user explicitly requests it.
8 changes: 8 additions & 0 deletions skills/igniteui-react-components/reference/CHARTS-GRIDS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,6 +383,14 @@ export default function OrderList() {
}
```

## Column Width Rule (Grid Lite and Advanced Grids)

> **⚠️ Do NOT set `width` on columns unless the user explicitly asks for specific column widths.**
>
> - `IgrGridLiteColumn` defaults to `minmax(136px, 1fr)` — columns are already responsive and fill all available space.
> - `IgrColumn` (in `IgrGrid`, `IgrTreeGrid`, `IgrHierarchicalGrid`) also auto-sizes by default.
> - Adding explicit pixel widths causes a fixed layout that leaves empty space on the right side of the grid.

> **Column configuration notes:**
> - `dataType` accepts `"string"` (default), `"number"`, `"boolean"` — set it explicitly so sorting and filtering work correctly for each column type.
> - `cellTemplate` receives an `IgrCellContext<T>` where `ctx.value` is the cell value and `ctx.row.data` is the full row object.
Expand Down
9 changes: 9 additions & 0 deletions skills/igniteui-react-generate-from-image-design/reference/gotchas.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,15 @@ In a flexible CSS Grid track, set `min-height: 0` on the grid cell and make the
### `roundShape` does NOT exist on `IgrAvatar`
Use the supported `shape` input alone. Do not add `roundShape`.

### Omit column `width` — both grid types are fluid by default

When a design shows a grid with columns at specific visual widths, do not translate those pixel proportions into `width` props on `IgrGridLiteColumn` or `IgrColumn`.

- `IgrGridLiteColumn` defaults to `minmax(136px, 1fr)` — responsive, fills all available space.
- `IgrColumn` in advanced grids (`IgrGrid`, `IgrTreeGrid`, `IgrHierarchicalGrid`) also distributes space automatically.

Adding explicit pixel widths causes a fixed layout that leaves empty space on the right side of the grid. Only set `width` if the user explicitly asks for fixed column widths.

### Tabs used for navigation should be label-only
When a screenshot shows tabs that drive routed page content, use label-only `IgrTab` items and keep the routed content outside the `IgrTabs` component. Do not place inline tab panel content inside router-driven tabs.

Expand Down