Namespace, Primitive, Method

    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published


    A ReactJS property sheet component built using the FluentUI library. What this basically does is display key-value data, with some additional features:

    • allow value rendering as a <code> fragment;
    • supports value rendering as a link, by providing an url property;
    • supports rendering an action icon button next to the value, by providing an action code and icon;
    • supports custom label rendering;
    • supports configurable label alignment;
    • supports custom value rendering.


    npm install --save lvd-fluentui-propertysheet


    The demo directory contains a compiled and ready-to-run example. Just open up the index.html file.

    Basic Usage

    import React from 'react';
    import { PropertySheet, PropertySheetLabelAlignments } from 'lvd-fluentui-propertysheet';
    class PropertySheetSamplePage extends React.Component {
    	constructor(props) {
    	render() {
    		return (
    			<div className="lvd-property-sheet-demo-container">
    	_getSampleItems() {
    		return [
    			{ label: 'Test 1', value: 'Value 1' },
    			{ label: 'Test 2', value: 'Value 2', formatAsCode: true },
    			{ label: 'Test 3', value: 'Value 3', url: '' },
    			{ label: 'Test 4', value: 'Value 4', action: { code: 'Edit', icon: 'Edit' } },
    			{ label: 'Test 5', value: 'Value 5' }

    You can find a full working example here.


    You can either directly include the dist/style.css into your html web page or use the @import directive inside your stylesheet if building using webpack:

    @import '~lvd-fluentui-propertysheet/dist/style.css';

    Also see the component itself.


    To build the demo application:

    npm run build-app

    To build the library:

    npm run build-dist

    To build both in one sitting:

    npm run build

    Customization Options

    What Prop Name Type Notes
    Set items items Property Sheet Data Item Object See below. Mandatory.
    Set additional container css class name className string Defaults to null.
    Set additional inline css style properties style object Key-value plain javascript object. Defaults to {}.
    Only show label fields labelOnly boolean Defaults to false.
    Change label alignment labelAlignment PropertySheetLabelAlignments See here for all supported values. Defaults to PropertySheetLabelAlignments.right.
    Display underlines for values that are rendered as links underlineValueLinks boolean Defaults to false.
    Provide custom label renderer onRenderLabel (item: Property Sheet Data Item Object, itemIndex: number) => JSX.Element Defaults to null.
    Provide custom value renderer onRenderValue (item: Property Sheet Data Item Object, itemIndex: number) => JSX.Element Defaults to null.

    Property Sheet Data Item Object

    Each item must be a plain javascript object with the following properties:

    Name Type Notes
    label string Displayable label. Mandatory.
    value string Displayable value. Optional.
    formatAsCode boolean Render this item as a code block. Optional. Defaults to false
    url string Render this item as a link with this url. Optional. Defaults to null
    action Property Sheet Data Item Action Object Action descriptor for when an action icon button needs to be rendered next to the raw value. See below. Optional. Defaults to null.

    Property Sheet Data Item Action Object

    Each item action descriptor must be a plain javascript object with the following properties:

    Name Type Notes
    code string Action code. Can be later used when listening for actions via onValueItemActionInvoked. Mandatory.
    icon string Must be a valid FluentUi icon name. Mandatory.


    Event Prop Name Arguments Notes
    Item action invoked onValueItemActionInvoked (item: Property Sheet Data Item Object, itemIndex: number, event: React.MouseEvent) Triggered when the action button related to a value is clicked.


    Version 0.0.1

    • First tracked version.


    I put some of my free time into developing and maintaining this plugin. If helped you in your projects and you are happy with it, you can...





    npm i lvd-fluentui-propertysheet

    DownloadsWeekly Downloads






    Unpacked Size

    2.6 MB

    Total Files


    Last publish


    • alexandru.boia