@nexys/mui-list
[![npm version](https://badge.fury.io/js/%40nexys%2Fmui-list.svg)](https://www.npmjs.com/package/@nexys/mui-list) [![npm version](https://img.shields.io/npm/v/@nexys/mui-list.svg)](https://www.npmjs.com/package/@nexys/mui-list) [![TavisCI](https://travis-
Last updated 4 months ago by nexys .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install @nexys/mui-list 
SYNC missed versions from official npm registry.

DataTable/List for Material UI (MUI) typescript

npm version npm version TavisCI Average time to resolve an issue Percentage of issues still open Code style Publish Bundlephobia

Multi-purpose data-table/business list for MUI

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

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/Nexysweb/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/Nexysweb/mui-list-ts/tree/master/src/list

References

Current Tags

  • 2.4.2                                ...           latest (4 months ago)

33 Versions

  • 2.4.2                                ...           4 months ago
  • 2.4.1                                ...           4 months ago
  • 2.4.0                                ...           4 months ago
  • 2.3.1                                ...           5 months ago
  • 2.2.5                                ...           5 months ago
  • 2.3.0                                ...           6 months ago
  • 2.2.4                                ...           6 months ago
  • 2.2.2                                ...           6 months ago
  • 2.2.1                                ...           7 months ago
  • 2.1.2                                ...           7 months ago
  • 2.1.1                                ...           8 months ago
  • 2.1.0                                ...           8 months ago
  • 2.0.9                                ...           9 months ago
  • 2.0.8                                ...           9 months ago
  • 2.0.7                                ...           9 months ago
  • 2.0.6                                ...           9 months ago
  • 2.0.5                                ...           9 months ago
  • 2.0.4                                ...           9 months ago
  • 2.0.3                                ...           9 months ago
  • 2.0.2                                ...           9 months ago
  • 2.0.1                                ...           9 months ago
  • 2.0.0                                ...           10 months ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.6                                ...           a year ago
  • 1.0.5                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (1)

Copyright 2014 - 2017 © taobao.org |