react-list

Description

Highly configurable react list component

Main features

• Virtualization with react-infinite
• Responsive or fixed size
• Columns with headers
• Selectable items
• Drag'n'drop ordering

Installation

npm install @opuscapita/react-list

Demo

View the DEMO

Change log

View the Change log

Migrate guide

View the Migrate guide between major versions

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

• With webpack use resolve.mainFields to configure the module type.
• Add SASS loader to support importing of SASS styles.

API

Prop name	Type	Default / params	Description
items	array of item objects	required	Array of items in the list
id	string	oc-react-list	Component base id
className	string		Component class
columns	array of column objects	[{ valueKey: 'value', title: 'value' }]	Array of columns in the list
selectedItems	array of id's	[]	Array of selected item id's
height	number or 'auto'	'auto'	Height of the list in pixels
width	number or 'auto'	'auto'	Width of the list in pixels
itemHeight	number	40	Height of the item in the list in pixels
columnHeaderHeight	number	40	Height of the column header in pixels
dragItemZindex	number	1060	draggable items z-index
idKey	string	'id'	ID key of item data
translations	object	{ search: 'Search', selectAll: 'All', showOnlySelected: 'Show only selected', noResults: 'There are no items to show in this list.' }	Translations
customTheme	object	themeDefaults	Override theme
highlightedItems	array	[]	List of ID keys of items to be highlighted with a grey background color
isSearchable	boolean	false	Is list searchable
isSelectColumnVisible	boolean	false	Is select column visible
isSelectAllVisible	boolean	false	Is select all checkbox visible
isShowOnlySelectedVisible	boolean	false	Is show only selected checkbox visible
isColumnHeaderVisible	boolean	false	Is column header visible
isIndexColumnVisible	boolean	false	Is index column visible
isItemBorderVisible	boolean	true	Is border visible between items
isSortable	boolean	false	Enable drag'n'drop sorting
showOnlySelectedInitialValue	boolean	false	Show only selected checkbox initial state
onSelectedChange	function	(selectedIds: array)	Callback for selected items change
onShowOnlySelectedChange	function	(showOnlySelected: bool)	Callback for Show only selected change
onRowClick	function	(item: object, rowIndex: number)	Callback for row click
onRowDoubleClick	function	(item: object, rowIndex: number)	Callback for row double click
onRowContextMenu	function	(item: object, rowIndex: number)	Callback for row context menu (right click)
onSelectAllClick	function		Callback for select all click
onSortEnd	function	({ oldIndex: number, newIndex: number })	Callback for sort end

column object attributes

Name	Type	Default / Parameters	Description
valueKey	string	'value'	Value key in the list
title	array of strings	'Value'	Title text to display in column header
width	number or 'auto'	200	Column width in pixels
alignment	string	'flex-start'	Value for justify-content CSS rule
render	function	(item: object, rowIndex: number)	Custom renderer function

special item attributes

Name	Type	Default / Parameters	Description
isAlwaysVisible	boolean	undefined	Should this item be always visible even if filters don't match it

Theme

You can use styled-components ThemeProvider to provide theme. If no ThemeProvider is found, default theme object is used. You can always override theme with customTheme prop.

Code example

Simple data

import React from 'react';
import List from '@opuscapita/react-list';

export default class ReactView extends React.Component {
  render() {
    const items = [
      { id: 1, value: 'item 1' },
      { id: 2, value: 'item 2' },
      { id: 3, value: 'item 3' },
    ];
    return (
      <List
        items={items}
      />
    );
  }
}

Column list with custom ID field, column header visible, sorting enabled

import React from 'react';
import List from '@opuscapita/react-list';
import arrayMove from 'array-move';

export default class ReactView extends React.Component {
  state = {
    items: [
      { itemId: 1, name: 'Valve', price: 15.99, tax: 24 },
      { itemId: 2, name: 'Crankshaft', price: 359.99, tax: 24 },
      { itemId: 3, name: 'Carburetor', price: 299.99, tax: 24 },
    ],
  }

  handleSortEnd = ({ oldIndex, newIndex }) => {
    const { items } = this.state;
    this.setState({
      items: arrayMove(items, oldIndex, newIndex),
    });
  };

  render() {
    const columns = [
      { valueKey: 'name', title: 'Item' },
      { valueKey: 'price', title: 'Price' },
      { valueKey: 'tax', title: 'Tax %' },
    ];
    const items = [
      { itemId: 1, name: 'Valve', price: 15.99, tax: 24 },
      { itemId: 2, name: 'Crankshaft', price: 359.99, tax: 24 },
      { itemId: 3, name: 'Carburetor', price: 299.99, tax: 24 },
    ];
    return (
      <List
        columns={columns}
        items={items}
        idKey="itemId"
        isColumnHeaderVisible
        isSortable
        onSortEnd={handleSortEnd}
      />
    );
  }
}