--- title: "Adding Features | Docs" description: "All features can be added on a per-grid basis. Add features by adding an attribute to the `` tag or adding components to the grid as child elements." url: https://www.zinggrid.com/docs/getting-started/adding-features --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/getting-started/adding-features.md mode: provenance representation: markdown origin_response_id: b23cbeafba5ae4297193387f8a465243 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.709Z version_nonce: 8f98536930dc62d3040eef32fecd6840 generated_at_utc: 2026-10-31T02:01:41.878Z response_nonce: d028c826ce52e49d7c3d5465e9263d42 ``` # Adding Features Turning on features is as easy as adding one attribute to the `` tag or adding some components to the grid as child elements. ZingGrid comes with many native features, from content filtering and sorting to editing cell/row data and custom-data display. All features are optional and can be added on a per-grid basis to allow you to accommodate the individual dataset. In this guide, we'll walk you through adding features to your ZingGrid via attributes, tags, and columns. ## Adding Attributes The easiest way to add a feature to the grid instance is by adding attributes to ``. Some features require just the attribute, while others allow you to pass a value to the attribute. For example, to add a title to the grid, just add a `caption` attribute with your caption text as the value, like so: ```html ``` Adding more features is as simple as adding more attributes. For example, you can add: - `sort` to enable ascending, descending, and default sorting functionality - `search` to enable text searching for specific words or phrases in your grid - `pager` to add paging controls to the bottom of the grid - `page-size` to add default page size - `page-size-options` to add a drop-down menu option for page sizes - `layout` to enable toggling between different grid layouts > **Note:** You can find the full list of attributes/features available in [our API docs](https://www.zinggrid.com/docs/api/tags/zing-grid). Most feature attributes are 'reflected' attributes, which means the grid will change if you change the value. In the example below, if you change the caption attribute's value after render with JavaScript or Dev Tools, the rendered display text will also update without reloading the grid. [Example code](https://app.zingsoft.com/demos/embed/KRC4XFCB) ## Adding Tags You can add most features as an attribute; alternatively, you can add features by tags. In general, tags allow slotted content. For example, our caption example from the previous section can also be added as: ```html

Employees

``` > **Note:** A full list of tags available for feature enhancement is available in [our API intro doc](https://www.zinggrid.com/docs/api-intro). > **Warning:** To keep the attribute and DOM elements in sync, the attribute takes precedence and drives the synchronization. Changing the attribute will update the DOM element, but not vice-versa. If you need to change data after render, update the attribute instead of the DOM element. ## Adding Columns By default, the data given to the grid is displayed in cells as text. However, the content might be a path to an image you want to display or a URL link you want to be clickable. Fortunately, ZingGrid comes with a large collection of pre-built [column types](https://www.zinggrid.com/docs/api-zg-column) that handles this for you. You can adjust the column type(s) with the `type` attribute, like so: ```html ``` You can also add slotted content to `zg-column` and display record info through `[[index.actor]]` or `[[record.actor]]` in your markup, like so: ```html
Voice By: [[index.actor]] ``` > **Note:** You can view all our [column types](https://www.zinggrid.com/docs/api-zg-column) and a list of all the attributes available for `` in our [API docs](https://www.zinggrid.com/docs/api/tags/zg-column). ## Featured Grid Here is a complete grid showing features added by all three techniques (attributes, tags, and columns) mentioned in this guide: [Example code](https://app.zingsoft.com/demos/embed/5BG67C17) ## Moving Forward You now understand the basics of adding features. If you think you are ready to start styling your grid, read our [Styling Basics guide](https://www.zinggrid.com/docs/styling-basics). If you think you need more server and database driven features, check out [Retrieving Data from a Local REST API](https://www.zinggrid.com/docs/rest) or [CRUD Basics](https://www.zinggrid.com/docs/crud/basics).