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