> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table.md). # Data Table Step-by-step tutorials to group, style, edit, search and act on records in the Avonni Data Table, each built on a real sales or service example. The [Data Table](/dynamic-components/components/data-table.md) shows Salesforce records in rows and columns that users can sort, search, edit and act on. These tutorials each build one thing on a realistic example, mostly a sales pipeline of Opportunities, so you can follow them in order or jump to the one you need. {% hint style="info" %} Every tutorial starts from a Data Table placed in a Dynamic Component with a **Query** data source. If you have not built one yet, start with [Data Table](/dynamic-components/components/data-table.md). {% endhint %} ## Display the right data Organize rows, add totals and choose what each column shows.


Configuring Data Grouping	Group Data Table rows under collapsible headers by stage, owner or account, and order the groups the way your team reads the pipeline.	data-table-tutorial-configuring-data-grouping-result.png	Configuring Data Grouping
Add Subtotals and Totals	Show the pipeline amount of each stage and a grand total row in a grouped Data Table, so a manager no longer exports the rows to a spreadsheet.	data-table-tutorial-add-subtotals-and-totals-result.png	Add Subtotals and Totals
Use Rich Column Types	Turn plain Data Table columns into record links, owner avatars, progress bars and star ratings, so a manager reviews deals without opening each one.	data-table-tutorial-use-rich-column-types-result.png	Use Rich Column Types
Manage Column Visibility	Show a Data Table column only to the users who need it, such as a Discount column for sales managers, by binding Hidden to a formula.	data-table-tutorial-manage-column-visibility-result.png	Manage Column Visibility

## Make the data easy to read Color stages and highlight values, driven by a formula field.


Apply Badge Color-Coding	Color the Stage column as a badge that follows each deal's stage, driven by one formula field, so a manager spots late and closed deals in one pass.	data-table-tutorial-apply-badge-color-coding-result.png	Apply Badge Color-Coding
Add Status Indicators	A small colored dot beside each deal's stage, made from a badge with its text hidden, keeps the status visible in a narrow table on an Account page.	data-table-tutorial-add-status-indicators-result.png	Add Status Indicators
Apply Conditional Cell Styling	Tint table cells with SLDS classes, either the same style on every row or a style picked per row by a formula field, so key values stand out.	data-table-tutorial-apply-conditional-cell-styling-result.png	Apply Conditional Cell Styling

## Let users act on records Buttons, menus and header actions that run on the row or the selection.


Add Custom Buttons	Put a Log Call button and an edit icon on every Opportunity row, so sales reps act on a deal right from the pipeline table.	data-table-tutorial-add-custom-buttons-result.png	Add Custom Buttons
Define Row Actions	Build a row menu on an Account table with Mark as Hot and View Website, so reps qualify and research prospects without opening each record.	data-table-tutorial-define-row-actions-result.png	Define Row Actions
Configure Header Actions	Header buttons above a pipeline table let a sales manager create a deal, or hand every selected deal to a new owner, without leaving the page.	data-table-tutorial-configure-header-actions-result.png	Configure Header Actions
Open a Record from a Row	Let users open an Opportunity from the table by its name, by a click on the row, or in a side panel, and choose how long lists load.	data-table-tutorial-open-a-record-from-a-row-result.png	Open a Record from a Row
Enable Data Export	An Export button on the Data Table downloads the rows users see, or only the ones they ticked, as an Excel or CSV file for their own spreadsheet.	data-table-tutorial-enable-data-export-result.png	Enable Data Export

## Edit without leaving the table Change one cell or many records, then save to Salesforce.


Enable Inline Editing	Let users correct amounts, stages and dates straight in the Data Table, then write every change back to Salesforce with a single Save.	data-table-tutorial-enable-inline-editing-result.png	Enable Inline Editing
Enable Bulk Editing	With a Bulk Edit button, users tick several records in the Data Table and change a field on all of them at once, with no flow to build.	data-table-tutorial-enable-bulk-editing-modal.png	Enable Bulk Editing

## Help users find records Search and filter long lists.


Set Up Search	Add a search box to a Data Table so users find a record by typing part of its name, including in fields the table does not show.	data-table-tutorial-set-up-search-result.png	Set Up Search
Add User Filters	Give users filter menus on a Data Table, with a value preselected on load, so a service manager opens the case list already narrowed to what matters.	data-table-tutorial-add-user-filters-result.png	Add User Filters

## Quick answers Short fixes for the questions admins ask support most often are collected in [Tips & Tricks](/dynamic-components/tutorials/components/data-table/tips-and-tricks.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/dynamic-components/tutorials/components/data-table.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.