Skip to content

fix(cli): add grid components types selection for project creation#1730

Open
georgianastasov wants to merge 14 commits into
masterfrom
ganastasov/add-grids-components-selection
Open

fix(cli): add grid components types selection for project creation#1730
georgianastasov wants to merge 14 commits into
masterfrom
ganastasov/add-grids-components-selection

Conversation

@georgianastasov

Copy link
Copy Markdown
Contributor

Description

This PR adds support for selecting additional grid component templates during project creation.

Previously, users could only choose the standard Grid option. With these changes, users can now choose between:

  • Grid
  • Tree Grid
  • Hierarchical Grid
  • Pivot Grid

The update covers the grid template selection flow and adds/updates the required templates so these options are available when creating projects.

Related Issue

Closes #1583

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Documentation update
  • Refactoring / code cleanup
  • Build / CI configuration change

Affected Packages

  • igniteui-cli (packages/cli)
  • @igniteui/cli-core (packages/core)
  • @igniteui/angular-templates (packages/igx-templates)
  • @igniteui/angular-schematics (packages/ng-schematics)
  • @igniteui/mcp-server (packages/igniteui-mcp)

Checklist

  • I have tested my changes locally (npm run test)
  • I have built the project successfully (npm run build)
  • I have run the linter (npm run lint)
  • I have added/updated tests as needed
  • My changes do not introduce new warnings or errors

Additional Context

This change ensures users are no longer limited to only the Data Grid option when creating projects that require grid components.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds additional Ignite UI for React (igr-ts) grid component templates so project creation can offer Tree Grid, Hierarchical Grid, and Pivot Grid options (in addition to the existing Grid), and adjusts routing behavior in the React side-nav project templates.

Changes:

  • Added new tree-grid, hierarchical-grid, and pivot-grid component template families (template metadata + starter files + Vitest tests).
  • Updated the existing grid/basic template styling and markup to match the newer page layout.
  • Normalized navigation paths in React side-nav project templates to ensure navigation/active-state checks use absolute paths.

Reviewed changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
packages/cli/templates/react/igr-ts/tree-grid/index.ts Registers the Tree Grid component group entry for igr-ts templates.
packages/cli/templates/react/igr-ts/tree-grid/basic/index.ts Adds Tree Grid “basic” template metadata (id/name/widget/packages).
packages/cli/templates/react/igr-ts/tree-grid/basic/files/src/app/path/style.module.css Tree Grid basic template page styling.
packages/cli/templates/react/igr-ts/tree-grid/basic/files/src/app/path/data.tsx Sample hierarchical employee dataset for Tree Grid.
packages/cli/templates/react/igr-ts/tree-grid/basic/files/src/app/path/filePrefix.tsx Tree Grid basic example component implementation.
packages/cli/templates/react/igr-ts/tree-grid/basic/files/src/app/path/filePrefix.test.tsx Basic smoke test for the Tree Grid component template.
packages/cli/templates/react/igr-ts/pivot-grid/index.ts Registers the Pivot Grid component group entry for igr-ts templates.
packages/cli/templates/react/igr-ts/pivot-grid/basic/index.ts Adds Pivot Grid “basic” template metadata (id/name/widget/packages).
packages/cli/templates/react/igr-ts/pivot-grid/basic/files/src/app/path/style.module.css Pivot Grid basic template page styling.
packages/cli/templates/react/igr-ts/pivot-grid/basic/files/src/app/path/data.tsx Sample dataset for Pivot Grid.
packages/cli/templates/react/igr-ts/pivot-grid/basic/files/src/app/path/filePrefix.tsx Pivot Grid basic example component implementation.
packages/cli/templates/react/igr-ts/pivot-grid/basic/files/src/app/path/filePrefix.test.tsx Basic smoke test for the Pivot Grid component template.
packages/cli/templates/react/igr-ts/hierarchical-grid/index.ts Registers the Hierarchical Grid component group entry for igr-ts templates.
packages/cli/templates/react/igr-ts/hierarchical-grid/basic/index.ts Adds Hierarchical Grid “basic” template metadata (id/name/widget/packages).
packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/path/style.module.css Hierarchical Grid basic template page styling.
packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/path/data.tsx Sample hierarchical artist/album/song dataset for Hierarchical Grid.
packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/path/filePrefix.tsx Hierarchical Grid basic example component implementation.
packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/path/filePrefix.test.tsx Basic smoke test for the Hierarchical Grid component template.
packages/cli/templates/react/igr-ts/projects/side-nav/files/src/app/app.tsx Normalizes route navigation/active checks to absolute paths.
packages/cli/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.tsx Normalizes route navigation/active checks to absolute paths.
packages/cli/templates/react/igr-ts/projects/side-nav-mini-auth/files/src/app/app.tsx Normalizes route navigation/active checks to absolute paths.
packages/cli/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.tsx Normalizes route navigation/active checks to absolute paths.
packages/cli/templates/react/igr-ts/grid/basic/files/src/app/path/style.module.css Updates Grid basic styling to the newer page layout.
packages/cli/templates/react/igr-ts/grid/basic/files/src/app/path/filePrefix.tsx Updates Grid basic markup/copy to match the newer page layout.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@coveralls

coveralls commented Jun 10, 2026

Copy link
Copy Markdown

Coverage Status

coverage: 87.835% (+0.05%) from 87.785% — ganastasov/add-grids-components-selection into master

georgianastasov and others added 7 commits June 10, 2026 10:44
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 59 out of 61 changed files in this pull request and generated 7 comments.

Comment thread packages/cli/lib/templates/IgniteUIForWebComponentsTemplate.ts Outdated
georgianastasov and others added 5 commits June 10, 2026 16:04
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

React project add tree, hierarchical and pivot grids

3 participants