@nexys/mui-list v2.6.2

DataTable/List for Material UI (MUI) typescript

Multi-purpose data-table/business list for MUI

See here: https://nexys-system.github.io/mui-list-ts/

Relies on https://github.com/nexys-system/core-list

Get started

yarn install @nexys/mui-list

Minimal example

import {List, Types} from '@nexys/mui-list';

interface Animal {
  id: number;
  name: string;
  location: {id: number; name: string};
}

// list of data (here only one entry to make example more concise)
const data: Animal[] = [
  { id: 2, name: 'Sheep', location: {id: 2, name: 'Europe'} },
];

// prepare search options
const options = ['Africa', 'Europe'].map((value, i) => ({ key: i+1, value }));

// table definition
const def: Types.Definition<Animal> = [
  { name: 'name', filter: true, sort: true },
  {
    name: 'location',
    filter: {
      type: 'category',
      func: (a, b): boolean => b.includes(a.location.id),
      options
    },
    render: (x): string => x.location.name
  }
];

// list config
const config = { search: true, nPerPage: 3 }

export default (): JSX.Element => (
  <List data={data} def={def} config={config} />
);

API

all interfaces/types are described here: https://github.com/nexys-system/mui-list-ts/tree/master/src/lib/types

def

def defines the structure of the table and is an array of DefinitionItem<A>

name

column name/identifier (has to be included in A). In the simplest configuration, renders the value of A[name]

label

column label. In the simplest configuration. If not given, name is displayed.

render

custom rendering, e.g. if A contains amount and the amount needs to be formatted: render: x => myCustomFormatFuntion(x.amount)

filters

displays a column filter. The filter can be customized, see examples

sort

displays a column sort.

config

search

displays general search box

nPerPage

list of items per page

data

This is the content of the table.

Examples

The source code for the examples can be found in: https://github.com/nexys-system/mui-list-ts/tree/master/src/list

References

• Material UI
• World Countries