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]

| Accepted Types: | Default Value | |---------------------|-------------------| | typeof A | - |

label

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

| Accepted Types: | Default Value | |---------------------|-------------------| | string | name |

render

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

| Accepted Types: | |---------------------| | (x:A) => ReactElement |

filters

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

| Accepted Types: | |---------------------| | Boolean + custom |

sort

displays a column sort.

| Accepted Types: | |---------------------| | Boolean + custom |

config

search

displays general search box

| Accepted Types: | Default Value | |---------------------|-------------------| | Boolean | false |

nPerPage

list of items per page

| Accepted Types: | Default Value | |---------------------|-------------------| | Int | 20 |

data

This is the content of the table.

| Accepted Types: | |---------------------| | A[] |

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