Introduction

What is FluentUI Editable DetailsList?

FluentUI is a great UI library with some really cool controls, all adhering to Accessibility Standards.

DetailsList control of FluidUI is great when your requirement is a read-only grid. However, it does not offer any in-place editability functionality just yet.

This component(Editable DetailsList) is a wrapper over the existing DetailsList that makes in-place editability work like a dream(among many other new features).

Some of the features of the Editable Grid are:-

• Single Cell Edit (in-place)
• Single Row Edit (in-place)
• Single Column Edit
• Multi-Column, multi-row edit (Bulk Edit)
• Full Edit (Edit Mode)
• Deleting Rows
• Adding Rows
• Default Data Export (to Excel, CSV)
• Implement Custom Export functionality
• Callback hook to recieve grid data in the consuming component(for Save etc.)
• Support for various controls in grid in-place edit like TextField, Multiline TextField, DatePicker (Support for Dropdown will be released soon)
• Flexibility to implement onChange callback on any cell value change (For cases like calculating summation of a column etc)
• Length Validations during edit
• Type Validations during edit
• The component is completely Accessible