Skip to content
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.

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

[35412] Grids: Remove Sketch and Adobe XD references #877

Open
wants to merge 27 commits into
base: vNext
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
dd2fea7
[35412] Grids: Remove Sketch and Adobe XD references
yradoeva Jan 3, 2025
d4d45bd
removed Adobe XD image
yradoeva Jan 3, 2025
8d62629
updated all images for Grid page
yradoeva Jan 6, 2025
3d98f8c
added images for grid cell types
yradoeva Jan 6, 2025
447b522
Grid Toolbar - removed Sketch & Adobe XD references; updated images
yradoeva Jan 6, 2025
8b6e372
Grid Export - removed Sketch & Adobe XD keywords
yradoeva Jan 6, 2025
ec76fa7
Grid Group By - removed Sketch & Adobe XD references
yradoeva Jan 6, 2025
9163f60
Grid Column Pinning - removed Sketch & Adobe XD references, updated t…
yradoeva Jan 6, 2025
981ae5b
Grid Column Hiding - removed Sketch & Adobe XD references; updated img
yradoeva Jan 6, 2025
742cfae
Grid Column Moving - removed Sketch & Adobe XD references
yradoeva Jan 6, 2025
6aa0f7d
Grid Column Resizing - removed Sketch & Adobe XD references, updated …
yradoeva Jan 6, 2025
97a4f40
Column Pinning - text fix
yradoeva Jan 6, 2025
41c2440
Column Resizing - image fix
yradoeva Jan 6, 2025
13d0630
Column Hiding - image fix
yradoeva Jan 6, 2025
b07e3da
Grid Sorting - removed Sketch & Adobe XD references; updated image
yradoeva Jan 7, 2025
bba289f
Grid Row Filter - removed Sketch & Adobe XD references; updated the i…
yradoeva Jan 7, 2025
79b6bb2
Grid Excel Style Filter - removed Sketch & Adobe XD references
yradoeva Jan 7, 2025
0f3b3e2
Grid Advanced Filter - removed Sketch & Adobe XD references
yradoeva Jan 7, 2025
07929b0
Grid Excel Style Filter - text fix
yradoeva Jan 7, 2025
a3c820f
Grid Row Selection - removed Sketch & Adobe XD references; update images
yradoeva Jan 7, 2025
c859587
Grid Excel Style Filter - delete outdated info
yradoeva Jan 7, 2025
2903e92
Grid Editing - removed Sketch & Adobe XD references
yradoeva Jan 7, 2025
d418c61
Grid Sizes - updated the keywords; changed the images
yradoeva Jan 7, 2025
8134b76
Grid Paging - removed Sketch from the keywords
yradoeva Jan 8, 2025
b4fb590
Grid Summaries - removed Sketch and Adobe XD references
yradoeva Jan 8, 2025
40c8365
Skeleton Grid - removed Sketch keywords; updated all images
yradoeva Jan 8, 2025
7bb957b
Grid - image fix
yradoeva Jan 8, 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
16 changes: 8 additions & 8 deletions en/components/grid-excel-style-filter.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
---
title: Grid Excel Style Filter - Grid Feature
_description: The Grid Excel Style Filter provides an overlay for column manipulations such as sorting, filtering, column moving, hiding, and pinning.
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Adobe XD, Adobe XD to Angular, Export code from Adobe XD, Adobe XD to HTML, Adobe XD UI kits
_description: The Grid Excel Style Filter provides an overlay for column manipulations such as sorting, filtering, column selection, moving, hiding, and pinning.
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
---

# Grid Excel Style Filter

Use the Grid Excel Style Filter to let the user specify a set of Grid features on the column: filtering by unique value or multiple conditions, sorting, column moving, hiding, and pinning. Only one column at a time may show the Excel Style Filter, and its Header Filter State must be set to active (see Header Cell below). The Grid Excel Style Filter is visually identical to the dialog used for the [Ignite UI for Angular Grid Excel Style Filtering Feature](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/excel_style_filtering.html)
Use the Grid Excel Style Filter to let the user specify a set of Grid features on the column: filtering by unique value or multiple conditions, sorting, column selection, moving, hiding, and pinning. Only one column at a time may show the Excel Style Filter, and its Header Cell must have `Feature Left` or `Feature Right` set to `Filtering Active` (see Header Cell below). The Grid Excel Style Filter is visually identical to the dialog used for the [Ignite UI for Angular Grid Excel Style Filtering Feature](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/excel_style_filtering.html)

## Grid Excel Style Filter Demo

<img class="responsive-img" src="../images/grid_excel_style_filter_demo.png" srcset="../images/[email protected] 2x" />

## Header Cell

In order to indicate that a column has an active Excel Style Filter in Sketch (the overlay for it is visible) you first need to set the `Feature Left` or `Feature Right` override to `Filtering` and then configure the next override in the panel `Filter State` to `Filtering/Active`. Furthermore, if you want to indicate that a column has Excel Style Filtering enabled you can use either the `Filtering/Inactive` state indicating that no filtering conditions are applied on this column, or the `Filtering/Filtered` state indicating that filtering conditions have been applied and the overlay for the column has been closed. In Figma to use the Excel Style Filtering you need to open the Grid Header Cell layer, select either the `Feature Left` or `Feature Right` component and change the `Type` property to `Filtering Inactive`, `Filtering Active` or `Filtering Filtered`. In Adobe XD you have to take a slightly different path by unhiding either the `Feature Left` or the `Feature Right` group and then leaving just the `Filtering` layer inside it, which should also be unhidden if necessary. Then via the available `Component States`, you will be able to switch the state to `Filtered`.
In Figma to use the Excel Style Filtering you need to open the Grid Header Cell layer, select either the `Feature Left` or `Feature Right` component and change the `Type` property to `Filtering Inactive`, `Filtering Active` or `Filtering Filtered`.

## Excel Style Filter Feature

The Grid has three `Excel Style Filter` symbols under `Features` in Sketch, one for each Display Density, that represent the overlay shown for the affected column. In Figma and Adobe XD, there is just one `Excel Style Filter`, and via the `Size` property in Figma and `Component States` in Adobe XD you can easily switch between the three sizes available. Adding the Excel Style Filter has only a visual effect on your design to make it more realistic, if you want to turn the Excel Style Filter feature on, configure the Header Cells accordingly.
In Figma, there is an `Excel Style Filter` component, and via the `Size` property you can easily switch between the three sizes available. Adding the Excel Style Filter has only a visual effect on your design to make it look more realistic, if you want to turn the Excel Style Filter feature on, configure the Header Cells accordingly.

<img class="responsive-img" src="../images/grid_excel_style_filter_sizes.png" srcset="../images/[email protected] 2x" />

> [!Note]
> Make sure to pick a Size variant for the Excel Style Filter overlay that matches the Grid Size since it is the one that is inherited by all features of the Grid.
> Make sure to pick a Size variant for the Excel Style Filter that matches the Grid Size since it is the one that is inherited by all features of the Grid.

### Overlay Customization
yradoeva marked this conversation as resolved.
Show resolved Hide resolved

The Excel Style Filter overlay lets you configure the Column name to reflect the column that triggered it as well as the list of unique values at the bottom with their on/off state and item Text. The other features are not configurable.

### Sorting, Moving, Hiding and Pinning
### Sorting, Selection, Moving, Hiding and Pinning

The Excel Style Filter interface provides additional functionality besides filtering such as Sorting, Column Moving, Column Hiding, and Column Pinning that are not configurable. If any of them is enabled on the column via the Header Cell (see how to enable them in their respective topic) the user interface elements for the feature will be shown in the Excel Style Filter interface according to the Grid Size that is being applied.
The Excel Style Filter interface provides additional functionality besides filtering such as Sorting, Column Selection, Column Moving, Column Hiding, and Column Pinning that are not configurable. If any of them is enabled on the column via the Header Cell (see how to enable them in their respective topic) the user interface elements for the feature will be shown in the Excel Style Filter interface according to the Grid Size that is being applied.
yradoeva marked this conversation as resolved.
Show resolved Hide resolved

## Additional Resources

Expand Down
Loading