1.0.2 • Published 5 months ago

mui-datatables-updated v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

MUI Datatable library inspired by the gregnb/mui-datatables project, featuring an up-to-date implementation with Typescript Support

Installation

If not already installed, install the Material-UI library:

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

Then install the mui-datatables-updated package:

npm install mui-datatables-updated

Usage

import React from 'react';
import MUIDataTable from 'mui-datatables-updated';

const sampleData = [
  {
    "id": 1,
    "name": "Cupcake",
    "carbs": 67,
  },
  {
    "id": 2,
    "name": "Donut",
    "carbs": 51,
  }
];

export default function App() {
  return (
    <>
      <MUITable title='Sample title' data={sampleData} />
    </>
  )
}

Options

NameTypeDescription
titlestringTitle of the table
dataarrayData to be displayed in the table
deactivateSelectbooleanDisable row selection
defaultOrderBystring -> must be a key in the data objectDefault order by key to sort the table data on first load
defaultOrder'asc' or 'desc'Default order to be used when sorting and displaying on first load
excludedColumnsarrayArray of keys in data objects to be excluded from the table
columnsarrayArray of objects to define the columns of the table
optionsobjectObject to define the options of the table

Example

import MUITable from 'mui-datatables-updated'

const sampleColumns = [
  {
    name: 'name',
    label: 'Name of dessert',
  },
  {
    name: 'healthy',
    label: 'Is Healthy?',
    options: {
      sort: false,
      customBodyRender: (value: boolean) => value ? ':)' : ':('
    }
  },
  {
    name: 'carbs',
    label: 'Carbs (g)',
    options: {
      sort: false
    }
  },
  {
    name: 'id',
    label: 'ID',
  }
]

function App() {
  return (
    <>
      <h1>MUI Table test</h1>
      <MUITable
        title='Sample Test'
        data={sampleData}
        defaultOrder='desc'
        defaultOrderBy='name'
        excludedColumns={['id']}
      />
      <MUITable
        title='Sample Test'
        data={sampleData}
        defaultOrder='desc'
        defaultOrderBy='name'
        columns={sampleColumns}
        deactivateSelect
        options={{
          translations: {
            filterTooltip: 'Filtrar',
            filtersTitle: 'Filtros',
            resetButtonText: 'Reiniciar',
            searchPlaceholder: 'Buscar...',
            rowsPerPageText: 'Filas por página',
            selectedTextRenderer: (numSelected) => `${numSelected} seleccionado/s`,
            labelDisplayedRows: ({ from, to, count }) => `${from}-${to} de ${count}`,
          }
        }}
      />
    </>
  )
}

Custom Columns

On each column object, you have the ability to customize columns to show the filtering options in the filter dropdown and to disable sorting when clicking on the column header. Values are set to true by default.

NameTypeDescription
namestringKey in the data object
labelstringLabel to be displayed in the column header
optionsobjectObject to define the options of the column

Options Object

NameTypeDescription
customBodyRenderfunctionFunction to render custom content in the column
filterbooleanShow filter dropdown in the column
sortbooleanEnable sorting when clicking on the column header

Custom columns example

const columns = [
 {
  name: "active",
  label: "Is Active",
  options: {
    customBodyRender: (value: boolean) => value ? 'Yes' : 'No',
    filter: true,
    sort: false
  }
 },
 ...
];

Localization

As well as gregnb original package, I decided that the cost of bringing in another library to perform localizations would be too expensive. Instead the ability to override most text labels (which aren't many) is offered through the translations property. The available customizations are:

<MUITable
  title='Sample Test'
  data={sampleData}
  options={{
    translations: {
      filterTooltip: 'Filtrar',
      filtersTitle: 'Filtros',
      resetButtonText: 'Reiniciar',
      searchPlaceholder: 'Buscar...',
      rowsPerPageText: 'Filas por página',
      selectedTextRenderer: (numSelected) => `${numSelected} seleccionado/s`,
      labelDisplayedRows: ({ from, to, count }) => `${from}-${to} de ${count}`,
    }
  }}
/>

Contributing

Pull requests are welcome. I won't be able to implement new features in the short term, so feel free to contribute to the project by adding new features, fixing bugs, creating tests, and improving the documentation.