FluentUIEditableDetailsList screenshot

FluentUIEditableDetailsList

Author Avatar Theme by Microsoft
Updated: 20 Nov 2022
83 Stars

Wrapper over Fluent UI DetailsList in React that allows in-place editability among other features

Overview

FluentUI Editable DetailsList is a remarkable UI component that builds upon the existing capabilities of the DetailsList control in the FluentUI library. This versatile tool is designed specifically for those who require in-place editing functionality within their data grids, allowing users to manage their data with ease and efficiency. Given its adherence to accessibility standards, this Editable DetailsList stands out as an excellent solution for a wide range of applications.

The Editable DetailsList not only makes editing a seamless experience but also introduces a plethora of features that enhance usability and functionality. From single cell edits to bulk editing, this component enables users to interact with their data in meaningful ways, while providing all the essential controls and features one would expect from a top-tier UI library.

Features

  • Single Cell Edit (in-place): Easily edit individual cells directly within the grid, enhancing user experience.
  • Single Row Edit (in-place): Modify an entire row’s data without having to navigate away from the grid view.
  • Bulk Edit: Edit multiple columns and rows simultaneously for efficiency in data management.
  • Custom Component Integration: Plug in custom components for specialized cell behavior during hovering.
  • Data Export Functionality: Export default data easily to formats like Excel and CSV, with options for custom export as needed.
  • In-place Editing Support: Supports various controls such as TextField, Multiline TextField, and DatePicker, making it highly versatile.
  • Validation Features: Implement length and type validations during edits to ensure data integrity.
  • Accessible Design: Fully compliant with accessibility standards, making it inclusive for all users.