Building Advanced Grids with Fluent UI and PCF

Grids are the workhorse of business apps — and the classic Dynamics 365 grid can only do so much. When you need inline editing, custom cells, grouping, or a polished look, a PCF control built with Fluent UI gives you a fast, modern, editable grid that feels native to Dynamics 365.

This article — part of our series on hosting PCF controls in modal popups — shows how to build advanced grids with Fluent UI and PCF, in plain language.

Why Fluent UI for Grids

• Native look — matches the Dynamics 365 and Microsoft 365 design language.
• Built-in DataGrid — the DataGrid component handles columns, sorting, and selection for you.
• Accessibility — keyboard navigation and screen-reader support out of the box.
• Theming — automatically respects the user’s light/dark theme.

Step 1 – Set Up a React + Fluent UI PCF Control

Scaffold a virtual (React) PCF control and add Fluent UI:

pac pcf init --namespace CloudVerve --name AdvancedGrid --template field --framework react
npm install @fluentui/react-components

Step 2 – Render the DataGrid

Use Fluent UI’s DataGrid to render rows and columns with almost no boilerplate:

import { DataGrid, DataGridHeader, DataGridRow,
         DataGridHeaderCell, DataGridBody, DataGridCell,
         createTableColumn } from "@fluentui/react-components";

const columns = [
  createTableColumn({ columnId: "name",  renderHeaderCell: () => "Name",
                      renderCell: (i) => i.name }),
  createTableColumn({ columnId: "phone", renderHeaderCell: () => "Phone",
                      renderCell: (i) => i.phone }),
];

<DataGrid items={rows} columns={columns} sortable>
  {/* header + body render here */}
</DataGrid>

Step 3 – Add Inline Editing

Swap a cell’s text for an Input when the user clicks it, and keep the edited value in state. On blur or Enter, save it back to Dataverse:

async function saveCell(recordId: string, field: string, value: string) {
    await context.webAPI.updateRecord("account", recordId, { [field]: value });
}

Step 4 – Handle Large Datasets

• Virtualize rows so only visible ones render — smooth even with thousands of records.
• Page the data from Dataverse instead of loading everything at once.
• Debounce search and filter inputs to avoid excess API calls.
• Cache lookups that don’t change often.

Advanced Features to Add

• Grouping and subtotals
• Custom cell renderers (status pills, icons, links)
• Row selection with bulk actions
• Column resize and reorder
• Export to Excel or CSV

Conclusion

Fluent UI plus PCF gives you grids that are fast, editable, accessible, and perfectly on-brand for Dynamics 365 — far beyond the classic grid. Start with the DataGrid, add inline editing and virtualization, and you have a professional, reusable component you can drop into any Custom Page dialog.

Related: Open a PCF Control in a Modal Popup Using Custom Pages and Best Practices for Responsive PCF Controls. Need a custom grid built? Talk to the CloudVerve team.