Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
26 changes: 26 additions & 0 deletions .ai/skills/igniteui-doc-topics/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,32 @@ cheat-sheet's "two classic confusions" section explains the reasoning.
7. **Self-check against the rubric** before presenting — especially mode-bleed (C-checks) and
metadata (D-checks). Fix, then deliver the `.mdx`.

### Category/index topics use a separate structure

Do not apply the component-topic blueprint to a category or index page. A category overview is a
reference/navigation map, not a composite component page. Its structure is:

1. `#` title followed by a one-line definition.
2. `## Key Features` immediately after the title and definition. Open with a short sentence, then present
the category's capabilities in a compact table with `Feature`, `Description`, and `Benefits`
columns when the content is naturally scannable. Use `## Types` or `## Members` as a top-level
navigation section when the category maps component types. Make `Types` the parent navigation
section and make each
concrete type, such as `{Platform} Data Grid`, `{Platform} List`, or `{Platform} Tree Grid`, a
separate navigable `###` subsection beneath it. Include a verified `<Sample>` for every type
entry, together with a concise definition and verified link. Additional
feature groups can follow as subsections inside `Key Features`.
3. `## Next Steps`.
4. `## API References`.
5. `## Additional Resources`.

Do not add component-only `When to Use`, `When Not to Use`, `Live Demo`, `Getting
Started`, `Usage`, `Properties`, `Accessibility`, or `Troubleshooting` sections
to the category introduction. Put selection guidance in the category definition or the relevant
type/member entry, and put each demo inside the entry it demonstrates. Supporting content such as
browser support, support options, licensing, and FAQ belongs after the navigation sections as
subsections of the page's main structure, not as additional top-level category sections.

## Audit workflow

1. **Classify** the topic and identify its doc set (Angular vs xplat) and type.
Expand Down
11 changes: 11 additions & 0 deletions .ai/skills/igniteui-doc-topics/references/audit-rubric.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,17 @@ concrete rule below (structure, naming, Diátaxis mode, or metadata) and to a fi

## Checks

### Category/index exception
Classify the topic before applying the checks below. A category/index page is evaluated against the
category blueprint in `house-style.md`, not the component-topic checklist. Do not report missing
component sections such as `Live Demo`, `Getting Started`, `Usage`, or `Accessibility`
when the page follows `Key Features` (with a short intro and a `Feature` / `Description` /
`Benefits` table) → top-level `Types/Members` section with each concrete type as its own
navigable `###` child subsection and a verified sample → `Next Steps` → `API References`
→ `Additional Resources`. Report component-topic sections in the category introduction as
information-architecture drift instead. Browser support, support options, licensing, and FAQ may be
subsections after the navigation sections and should not be required as top-level sections.

### A. Structure & order
- A1 (Error) A required section is missing (`## Live Demo`, Anatomy, Getting Started, Usage,
Properties, Accessibility, API References, Additional Resources on a component
Expand Down
15 changes: 13 additions & 2 deletions .ai/skills/igniteui-doc-topics/references/house-style.md
Original file line number Diff line number Diff line change
Expand Up @@ -278,8 +278,19 @@ Title + intro → **Overview** → **Before You Start** → **Next Steps** → *
accordion for FAQ content when a compact question-and-answer block is useful.

**5b. Category / index overview** (Diátaxis: *reference/navigation* — a map) — e.g. "Charts overview":
Title + intro → **Key Features** → **Types** (identical micro-structure per entry: one-line def + link + small
`<Sample>`) → **Next Steps** → **API References / Additional Resources**.
The page uses **Key Features** immediately after the title and definition (open with a short intro and a compact `Feature` / `Description` /
`Benefits` table) → top-level **Types / Members** section when the category maps component
types. Each concrete type/member, such as `{Platform} Data Grid`, `{Platform} List`, or
`{Platform} Tree Grid`, is its own navigable `###` child subsection with a concise definition,
verified link, and a verified `<Sample>` for every entry) → additional feature
subsections as needed → **Next Steps** → **API References** → **Additional Resources**.

The category introduction must not use the component-topic sequence `When to Use`,
`When Not to Use`, `Live Demo`, `Getting Started`, `Usage`, `Properties`,
`Accessibility`, or `Troubleshooting`. Selection guidance belongs in the category definition or in
the relevant type/member entry, and a demo belongs inside the entry it demonstrates. Supporting
content such as browser support, support options, licensing, and FAQ follows the navigation sections
as subsections of the page's main structure; do not make each one a new top-level category section.

Guardrails: cap each section at ~3 short paragraphs (else add sub-sections); isolate marketing copy in
a single "Why {ProductName}" section — never thread it through instructional content.
Expand Down
150 changes: 83 additions & 67 deletions docs/xplat/src/content/en/components/grids/grids-header.mdx
Original file line number Diff line number Diff line change
@@ -1,85 +1,48 @@
---
title: "{Platform} Grids & Tables | Fastest {Platform} UI Grid | Infragistics"
description: Looking for fast {Platform} grids and tables? {ProductName} provides a complete library of {Platform}-native, Material-based UI data grids and tables. Find more.
title: "{Platform} Grids and Lists | {ProductName}"
description: "{ProductName} provides {Platform} components for displaying, navigating, editing, and analyzing structured data in grids, lists, and tree grids."
keywords: "{Platform} data grid, table, grids, {ProductName}, Infragistics"
license: commercial
mentionedTypes: ["Infragistics.Controls.Grid"]
llms:
description: "{ProductName} provides a complete library of {Platform}-native, Material-based UI components, including the world’s fastest virtualized {Platform} data grid."
description: "{ProductName} provides {Platform} components for displaying, navigating, editing, and analyzing structured data in grids, lists, and tree grids."
---

import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
import Feature from 'docs-template/components/mdx/Feature.astro';
import CtaArea from 'docs-template/components/mdx/CtaArea.astro';
import FeatureList from 'docs-template/components/mdx/FeatureList.astro';
import FaqAccordion from 'docs-template/components/mdx/FaqAccordion.astro';
import BrowserList from 'docs-template/components/mdx/BrowserList.astro';

# The Fastest {Platform} Grid
# Grids and Lists

{ProductName} provides a complete library of {Platform}-native, Material-based UI components, including the world’s fastest virtualized {Platform} data grid.


## {Platform} Grid Example

In this {Platform} grid example, you can see how users can customize their _data view_ by leveraging the various features built into the grid, like data search and filtering, columns sorting, resizing, pinning and hiding, row selection, export to excel and csv, horizontal and vertical scrolling. We have provided examples for cell templating that includes components like linear progress bar indicator and sparkline. View more features in this [topic](#{PlatformLower}-grid-features).

<Sample src="/{GridSample}/overview" height={700} alt="{Platform} grid example" />

## What is a {Platform} Grid?

The {Platform} data grid is a component used to display tabular data in a series of rows and columns. Data grids, also known as tables, are well known in the desktop world with popular software such as Microsoft Excel. While grids have been available on desktop platforms for a long time, they have recently become part of web app UIs, such as {Platform} UI. Modern grids can be complex and may include a range of functionalities, including data binding, editing, Excel-like filtering, custom sorting, grouping, row reordering, row and column freezing, row aggregation, and exporting to Excel, CSV, and pdf formats.


## Why Use a {Platform} Grid?

{Platform} data grids are essential in use cases where lots of data must be stored and sorted through quickly. This can include industries such as financial or insurance that use high-volume, high-velocity data frequently. Often the success of these companies is dependent on the functionality and performance of these data grids. When stock decisions need to be made in microseconds, for example, it’s imperative that the data grid performs with no lag time or flicker.
{ProductName} provides components for displaying, navigating, editing, and analyzing structured data in {Platform} applications.

## Key Features

The {ProductName} Data Grid is not just for high-volume and real-time data. It is a feature-rich {Platform} grid that gives you capabilities that you would never be able to accomplish with so little code on your own.

Here are a few of the data grid’s key features:

<ul class="features-simple-list" id="features-list">
<li>
[Virtualized Rows and Columns](./_shared/virtualization.mdx) so you can load millions of records
</li>

<li>
[Inline Editing](./_shared/editing.mdx) with [Cell](./_shared/cell-editing.mdx), and [Row](./_shared/row-editing.mdx) Update options
</li>

<li>
[Inline Editing](./_shared/editing.mdx) with [Cell](./_shared/cell-editing.mdx)
</li>

{/*Add back when batch editing is available>*/}
{/* <li>[**Inline Editing**](./_shared/editing.mdx) with [**Cell**](./_shared/cell-editing.mdx), [**Row**](./_shared/row-editing.mdx), and [**Batch**](./_shared/batch-editing.mdx) Update options</li> */}

<li>
[Excel-style Filtering](./_shared/excel-style-filtering.mdx) and full [Excel Keyboard Navigation](./_shared/keyboard-navigation.mdx) capability
</li>

<li>
Interactive [Outlook-style Grouping](./grid/groupby.mdx)
</li>

<li>
[Column Summaries](./_shared/summaries.mdx) based on any data in a grid cell or column
</li>

<li>
[Export to Excel](./_shared/export-excel.mdx)
</li>

<li>
[Size](./_shared/size.mdx) to adjust the height and sizing of the rows
</li>

{/* <li>Column templates like [**Sparkline Column**](./charts/types/sparkline-chart.mdx) and Image Column</li> */}
</ul>
| Feature | Description | Benefits |
| --- | --- | --- |
| [Virtualized rows and columns](./_shared/virtualization.mdx) | Load and scroll through large data sets. | Keep interactions responsive as data volume grows. |
| [Responsive data presentation](./data-grid.mdx) | Present structured data across different screen sizes and application layouts. | Provide a consistent experience across devices. |
| [Local and remote data binding](./data-grid.mdx) | Connect grids to local collections or remote data sources. | Use the same data presentation patterns with different data sources. |
| [Inline editing](./_shared/editing.mdx) | Edit data in cells or rows. | Update records without leaving the data context. |
| [Excel-style filtering](./_shared/excel-style-filtering.mdx) | Filter data with familiar spreadsheet-style interactions. | Help users narrow large data sets quickly. |
| [Keyboard navigation](./_shared/keyboard-navigation.mdx) | Navigate grid content with the keyboard. | Improve productivity and support keyboard users. |
| [Sorting and searching](./_shared/sorting.mdx) | Find and organize records with single- and multi-column sorting and search. | Make important records easier to locate and compare. |
| [Column grouping](./grid/groupby.mdx) | Group related columns and summarize data. | Reveal relationships in complex tabular data. |
| [Column summaries](./_shared/summaries.mdx) | Display calculated values for grid data. | Surface totals and other useful aggregates at a glance. |
| [Row and column selection](./_shared/selection.mdx) | Select records or cells using pointer and keyboard interactions. | Support bulk actions and focused data workflows. |
| [Column moving, hiding, resizing, and pinning](./_shared/column-moving.mdx) | Let users customize the visible layout of the grid. | Adapt the grid to each user's priorities. |
| [Export to Excel](./_shared/export-excel.mdx) | Export grid data for further analysis. | Extend reporting and offline workflows. |
| [Cell templates and styling](./data-grid.mdx#cell-template) | Customize cell content and presentation. | Make domain-specific values easier to understand. |
| [Row sizing](./_shared/size.mdx) | Adjust the height and density of grid rows. | Balance readability and the amount of visible data. |
| [Accessibility support](../interactivity/accessibility-compliance.mdx) | Support keyboard interaction and accessible data presentation. | Make data workflows more usable for a wider audience. |

### Data Virtualization and Performance
Seamlessly scroll through unlimited rows and columns in your {Platform} grid, with the data grid’s column and row level virtualization. With support for local or remote data sources, you get the best performance no matter where your data lives. Your users will experience Excel-like scrolling, with enterprise speed — no lag, screen flicker, or visual delay — giving you the best user experience (UX) without compromising performance.
Expand Down Expand Up @@ -182,7 +145,7 @@ Seamlessly scroll through unlimited rows and columns in your {Platform} grid, wi

</PlatformBlock>

## {Platform} Grid Features
### {Platform} Grid Features
<FeatureList>
<ul>
<li>
Expand Down Expand Up @@ -290,18 +253,71 @@ Seamlessly scroll through unlimited rows and columns in your {Platform} grid, wi
</ul>
</FeatureList>

## Types
{ProductName} includes several grid and list types for different data presentation needs. Choose the type that matches the structure of your data and the interactions your users need.

### {Platform} Data Grid
Display tabular data with column-based operations such as sorting, filtering, editing, grouping, summaries, selection, and export. See the [{Platform} Data Grid documentation](data-grid.mdx).

<PlatformBlock for="Angular">

<Sample src="/grid/grid-overview" height={700} alt="{Platform} data grid with filtering, sorting, selection, and export" />

</PlatformBlock>

<PlatformBlock for="WebComponents,React,Blazor">

<Sample src="/{GridSample}/overview" height={700} alt="{Platform} data grid with filtering, sorting, selection, and export" />

</PlatformBlock>

### {Platform} List
Present a one-dimensional collection of items when users need to browse or select records without a column layout. See the [{Platform} List documentation](list.mdx).

<PlatformBlock for="Angular">

<Sample src="/lists/list-overview" height={300} alt="{Platform} List overview" />

</PlatformBlock>

<PlatformBlock for="WebComponents,React,Blazor">

<Sample src="/grids/list/overview" height={300} alt="{Platform} List overview" />

</PlatformBlock>

### {Platform} Tree Grid
Present hierarchical data in rows and columns when users need to expand, collapse, and work with parent-child relationships. See the [{Platform} Tree Grid documentation](tree.mdx).

<PlatformBlock for="Angular">

<Sample src="/lists/tree-basic-sample" height={400} alt="{Platform} Tree Grid basic example" />

</PlatformBlock>

<PlatformBlock for="WebComponents,React,Blazor">

<Sample src="/grids/tree/basic-example" height={400} alt="{Platform} Tree Grid basic example" />

</PlatformBlock>

<CtaArea
title="Download the Fastest {Platform} Grid Today!"
label="Download Now"
href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/download"
note="30 days free trial. No credit card required."
/>

## {ProductName} Supported Browsers
The {Platform} Data Grid is supported on all modern web browsers, including:
<BrowserList />
## Next Steps
Start with the [{Platform} Data Grid documentation](data-grid.mdx), then choose focused guides for [paging](./_shared/paging.mdx), [filtering](./_shared/filtering.mdx), [editing](./_shared/editing.mdx), [selection](./_shared/selection.mdx), or [virtualization](./_shared/virtualization.mdx).

## API References
Use the <ApiLink type="Grid" label="{Platform} Data Grid API reference" /> for the complete list of supported API members and configuration options.

## Additional Resources
Review the [{Platform} List documentation](list.mdx), [{Platform} Tree Grid documentation](tree.mdx), and [accessibility guidance](../interactivity/accessibility-compliance.mdx) when selecting and configuring a data presentation component.

## {ProductName} Support Options
### {ProductName} Support Options

There are multiple options to get access to our award-winning support at Infragistics for the {Platform} product.

Expand All @@ -312,11 +328,11 @@ There are multiple options to get access to our award-winning support at Infragi
- Learn from the {Platform} <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">Reference Applications</a>


## {ProductName} Trial License and Commercial
### {ProductName} Trial License and Commercial
<p>{ProductName} is a commercially licensed product available via a subscription model. You can try the {ProductName} product for free when you <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/free-downloads">register for a 30-day trial</a>. When you are done with your Trial Period, you can <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/how-to-buy/product-pricing">purchase a license </a> from our web site or by calling <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/about-us/contact-us">sales in your region</a>.</p>


## Frequently Asked Questions
### Frequently Asked Questions
<FaqAccordion>
<igc-expansion-panel indicator-position="end">
<span class="igd-expansion-title" slot="title">Why should I choose the Infragistics {ProductName} Data Grid?</span>
Expand Down
Loading
Loading