0.1.1 • Published 2 years ago

@leandri/mui-datatable v0.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

MUI-datatable

Library to easily generate complex datatables in MUI

Installation

Using npm:

npm i @leandri/mui-datatable

Example

  1. Import the required type renderers:
import { text } from '@leandri/mui-datatable'
  1. Define the data:
const data = [
  { id: 1, firstname: 'Olivia', lastname: 'Thompson' },
  { id: 2, firstname: 'Emma', lastname: 'Jones' },
  { id: 3, firstname: 'Stephen', lastname: 'Roberts' },
]
  1. Define the columns:
const columns = [
  text({ key: 'id', name: 'ID' }),
  text({ key: 'firstname', name: 'First Name' }),
  text({ key: 'lastname', name: 'Last Name' }),
]
  1. Add the datatable:
import { Datatable } from '@leandri/mui-datatable'

const Home = () => (
  <Paper>
    <Datatable rows={data} columns={columns} />
  </Paper>
)

Type renderers

Text

Props

NameTypeRequiredDefault
keynumber | stringRequired-
namestringRequired-
formatterfunctionOptional-
alignalignOptionalleft

Example

import { text } from '@leandri/mui-datatable'

const rows = [
  { id: 1, firstname: 'Olivia', lastname: 'Thompson' },
  { id: 2, firstname: 'Emma', lastname: 'Jones' },
  { id: 3, firstname: 'Stephen', lastname: 'Roberts' },
]

const columns = [
  text({ key: 'id', name: 'ID' }),
  text({ key: 'firstname', name: 'First Name' }),
  text({ key: 'lastname', name: 'Last Name' }),
  text({
    key: 'fullname',
    name: 'Full Name',
    formatter: (row) => `${row.firstname} ${row.lastname}`,
    align: 'justify',
  }),
]

Output

Text Renderer Example

Number

Props

NameTypeRequiredDefault
keynumber | stringRequired-
namestringRequired-
alignalignOptionalright

Example

import { number } from '@leandri/mui-datatable'

const rows = [
  { id: 1, firstname: 'Olivia', age: 18 },
  { id: 2, firstname: 'Emma', age: 30 },
  { id: 3, firstname: 'Stephen', age: 28 },
]

const columns = [
  // ...others
  number({
    key: 'age',
    name: 'Age',
    align: 'left',
  }),
]

Output

Number Renderer Example

Decimal

Props

NameTypeRequiredDefault
keynumber | stringRequired-
namestringRequired-
precisionnumberOptional2
prefixstringOptional-
suffixstringOptional-
alignalignOptionalright

Example

import { decimal } from '@leandri/mui-datatable'

const rows = [
  { id: 1, name: 'Olivia', progress: 62.25, amount: 90720 },
  { id: 2, name: 'Emma', progress: 100, amount: 156000.5 },
  { id: 3, name: 'Stephen', progress: 86, amount: 134060 },
]

const columns = [
  // ...others
  decimal({
    key: 'progress',
    name: 'Progress',
    precision: 1,
    suffix: '%',
    align: 'left',
  }),
  decimal({
    key: 'amount',
    name: 'Amount',
    prefix: '$',
  }),
]

Output

Decimal Renderer Example

Boolean

Props

NameTypeRequiredDefault
keynumber | stringRequired-
namestringRequired-
trueLabelstringOptionalYes
falseLabelstringOptionalNo
alignalignOptionalright

Example

import { bool } from '@leandri/mui-datatable'

const rows = [
  { id: 1, firstname: 'Olivia', isAdmin: true },
  { id: 2, firstname: 'Emma', isAdmin: false },
  { id: 3, firstname: 'Stephen', isAdmin: false },
]

const columns = [
  // ...others
  bool({
    key: 'isAdmin',
    name: 'Admin',
  }),
  bool({
    key: 'isAdmin',
    name: 'Role',
    trueLabel: 'Admin',
    falseLabel: 'User',
  }),
]

Output

Boolean Renderer Example

0.1.1

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago