grouped-list-view

This is a React component meant to be used to render list items in a master-detail view.

Installation

Using npm:

$ npm i grouped-list-view

Example

const properties = {
    listHeaderLabel: 'Select a schedule',
    columnHeaderLabels: ['Name'],
    items: [
      {id: '5', selected: true, canBeDeleted: false, deleteButtonTooltipText: 'This schedule has active appointments', columns: ['Dr. Nancy Grison']},
      {id: '6', selected: false, columns: ['Dr. James Stuart']}
    ],
    groups: [{label: 'Expired schedules', items: [
      {id: '7', selected: false, columns: ['Dr. Willy Frankly']}
    ]}],
    onSelect: (id) => {...},
    onDelete: (id) => {...}
}
const element = <GroupedListView {...properties}  />;

This would render the following:

<div class="grouped-list-view">
    <div class="list-header">Select a schedule</div>
    <div class="list-container">
      <ul class="list">
        <li class="header-group"><div>Name</div></li>
        <li class="row selected"><div>Dr. Nancy Grison</div><div><a href="" disabled class="delete-button"></a></div></li>
        <li class="row"><div>Dr. James Stuart</div><div><a href="" class="delete-button"></a></div></li>
      </ul>
      <ul class="list">
        <li class="item-group-header"><div>Expired schedule</div></li>
        <li class="row"><div>Dr. Willy Frankly</div><div><a href="" class="delete-button"></a></div></li>
      </ul>
    </div>
</div>

There's an example .less file included.