Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/gregnb/mui-datatables below:

gregnb/mui-datatables: Datatables for React using Material-UI

MUI-Datatables is a responsive datatables component built on Material-UI. It comes with features like filtering, resizable columns, view/hide columns, draggable columns, search, export to CSV download, printing, selectable rows, expandable rows, pagination, and sorting. On top of the ability to customize styling on most views, there are three responsive modes "vertical", "standard", and "simple" for mobile/tablet devices.

Version 3 has been released! You can read about the updates here!

• MUI-Datatables - Datatables for MUI (formerly Material-UI)
• Table of contents
  • Install
  • Compatibility
  • Demo
  • Usage
  • API
    • <MUIDataTable />
    • Options:
  • Customize Columns
    • Column:
    • Column Options:
  • Plug-ins
    • Available Plug-ins:
  • Customize Styling
  • Custom Components
  • Remote Data
  • Localization
  • Contributing
  • License
  • Thanks

npm install mui-datatables --save

If your project doesn't already use them, you need to install mui v5 and it's icon pack:
npm --save install @mui/material @emotion/react @emotion/styled @mui/icons-material

Browse live demos of all examples in this repo in here!

For a simple table:

import MUIDataTable from "mui-datatables";

const columns = ["Name", "Company", "City", "State"];

const data = [
 ["Joe James", "Test Corp", "Yonkers", "NY"],
 ["John Walsh", "Test Corp", "Hartford", "CT"],
 ["Bob Herm", "Test Corp", "Tampa", "FL"],
 ["James Houston", "Test Corp", "Dallas", "TX"],
];

const options = {
  filterType: 'checkbox',
};

<MUIDataTable
  title={"Employee List"}
  data={data}
  columns={columns}
  options={options}
/>

Or customize columns:

import React from "react"
import MUIDataTable from "mui-datatables";

const columns = [
 {
  name: "name",
  label: "Name",
  options: {
   filter: true,
   sort: true,
  }
 },
 {
  name: "company",
  label: "Company",
  options: {
   filter: true,
   sort: false,
  }
 },
 {
  name: "city",
  label: "City",
  options: {
   filter: true,
   sort: false,
  }
 },
 {
  name: "state",
  label: "State",
  options: {
   filter: true,
   sort: false,
  }
 },
];

const data = [
 { name: "Joe James", company: "Test Corp", city: "Yonkers", state: "NY" },
 { name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
 { name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },
 { name: "James Houston", company: "Test Corp", city: "Dallas", state: "TX" },
];

const options = {
  filterType: 'checkbox',
};

<MUIDataTable
  title={"Employee List"}
  data={data}
  columns={columns}
  options={options}
/>

The component accepts the following props:

• true: Button is visible and clickable.
• false: Button is not visible.
• disabled: Button is visible, but not clickable.

• filename: string
• separator: string
• filterOptions: object
  • useDisplayedColumnsOnly: boolean
  • useDisplayedRowsOnly: boolean

Default Value:{filename: 'tableDownload.csv', separator: ','}

• enabled:boolean: Indicates if draggable columns are enabled. Defaults to false.
• transitionTime:number: The time in milliseconds it takes for columns to swap positions. Defaults to 300.

• true: Button is visiable and clickable.
• false: Button is not visible.
• disabled: Button is visible, but not clickable.

• true: Button is visiable and clickable.
• false: Button is not visible.
• disabled: Button is visible, but not clickable.

• "vertical" (default value): In smaller views the table cells will collapse such that the heading is to the left of the cell value.
• "standard": Table will stay in the standard mode but make small changes to better fit the allocated space.
• "simple": On very small devices the table rows will collapse into simple display.

• true: Button is visiable and clickable.
• false: Button is not visible.
• disabled: Button is visible, but not clickable.

• true: Button is visiable and clickable.
• false: Button is not visible.
• disabled: Button is visible, but not clickable.

On each column object, you have the ability to customize columns to your liking with the 'options' property. Example:

const columns = [
 {
  name: "Name",
  options: {
   filter: true,
   sort: false
  }
 },
 ...
];

• The value returned from this function is not used for filtering, so the filter dialog will use the raw data from the data array.
• This method only gives you the dataIndex and rowIndex, leaving you to lookup the column value.

• render: function that returns a string or array of strings used as the chip label(s). function(value) => string OR arrayOfStrings Example
• update: function that returns a filterList (see above) allowing for custom filter updates when removing the filter chip. filterType must be set to "custom". function(filterList, filterPos, index) => filterList Example

• true: Column is visible and toggleable via the View Columns popover in the Toolbar.
• false: Column is not visible but can be made visible via the View Columns popover in the Toolbar.
• excluded: Column is not visible and not toggleable via the View Columns popover in the Toolbar.

See also: viewColumns and filter options.

These options affect the filter display and functionality from the filter dialog. To modify the filter chips that display after selecting filters, see customFilterListOptions

This option is an object of several options for customizing the filter display and how filtering works.

• names: custom names for the filter fields Example
• logic: custom filter logic Example
• display(filterList, onChange(filterList, index, column), index, column, filterData): Custom rendering inside the filter dialog Example. filterList must be of the same type in the main column options, that is an array of arrays, where each array corresponds to the filter list for a given column.
• renderValue: A function to customize filter choices Example. Example use case: changing empty strings to "(empty)" in a dropdown.
• fullWidth (boolean): Will force a filter option to take up the grid's full width.

customHeadRender is called with these arguments:

function(columnMeta: {
  customHeadRender: func,
  display: enum('true', 'false', 'excluded'),
  filter: boolean,
  sort: boolean,
  download: boolean,
  empty: boolean,
  index: number,
  label: string,
  name: string,
  print: boolean,
  searchable: boolean,
  viewColumns: boolean
}, handleToggleColumn: function(columnIndex))

customBodyRender is called with these arguments:

function(value: any, tableMeta: {
  rowIndex: number,
  columnIndex: number,
  columnData: array, // Columns Options object
  rowData: array, // Full row data
  tableData: array, // Full table data - Please use currentTableData instead
  currentTableData: array, // The current table data
  tableState: {
    announceText: null|string,
    page: number,
    rowsPerPage: number,
    filterList: array,
    selectedRows: {
      data: array,
      lookup: object,
    },
    showResponsive: boolean,
    searchText: null|string,
  },
}, updateValue: function)

The table lends itself to plug-ins in many areas, especially in the customRender functions. Many use cases for these render functions are common, so a set of plug-ins are available that you can use.

Using Material-UI theme overrides will allow you to customize styling to your liking. First, determine which component you would want to target and then lookup the override classname. Let's start with a simple example where we will change the background color of a body cell to be red:

import React from "react";
import MUIDataTable from "mui-datatables";
import { createTheme, ThemeProvider } from '@mui/material/styles';

class BodyCellExample extends React.Component {

  getMuiTheme = () => createTheme({
    components: {
      MUIDataTableBodyCell: {
        styleOverrides:{
          root: {
              backgroundColor: "#FF0000"
          }
        }
      }
    }
  })

  render() {

    return (
		  <ThemeProvider theme={this.getMuiTheme()}>
			  <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
		  </ThemeProvider>
    );

  }
}

You can pass custom components to further customize the table:

import React from "react";
import Chip from '@mui/material/Chip';
import MUIDataTable, { TableFilterList } from "mui-datatables";

const CustomChip = ({ label, onDelete }) => {
    return (
        <Chip
            variant="outlined"
            color="secondary"
            label={label}
            onDelete={onDelete}
        />
    );
};

const CustomFilterList = (props) => {
    return <TableFilterList {...props} ItemComponent={CustomChip} />;
};

class CustomDataTable extends React.Component {
    render() {
        return (
            <MUIDataTable
                columns={columns}
                data={data}
                components={{
                  TableFilterList: CustomFilterList,
                }}
            />
        );
    }
}

Supported customizable components:

• Checkbox - A special 'data-description' prop lets you differentiate checkboxes Example. Valid values: ['row-select', 'row-select-header', 'table-filter', 'table-view-col'].The dataIndex is also passed via the "data-index" prop.
• ExpandButton Example
• DragDropBackend
• TableBody
• TableViewCol - The component that displays the view/hide list of columns on the toolbar.
• TableFilterList - You can pass ItemComponent prop to render custom filter list item.
• TableFooter
• TableHead
• TableResize
• TableToolbar
• TableToolbarSelect
• Tooltip
• icons - An object containing optional replacement icon classes for the actions toolbar. Example
  • SearchIcon
  • DownloadIcon
  • PrintIcon
  • ViewColumnIcon
  • FilterIcon

For more information, please see this example. Additionally, all examples can be viewed live at our CodeSandbox.

If you are looking to work with remote data sets or handle pagination, filtering, and sorting on a remote server you can do that with the following options:

const options = {
  serverSide: true,
  onTableChange: (action, tableState) => {
    this.xhrRequest('my.api.com/tableData', result => {
      this.setState({ data: result });
    });
  }
};

To see an example Click Here

This package decided that the cost of bringing in another library to perform localizations would be too expensive. Instead the ability to override all text labels (which aren't many) is offered through the options property textLabels. The available strings:

const options = {
  ...
  textLabels: {
    body: {
      noMatch: "Sorry, no matching records found",
      toolTip: "Sort",
      columnHeaderTooltip: column => `Sort for ${column.label}`
    },
    pagination: {
      next: "Next Page",
      previous: "Previous Page",
      rowsPerPage: "Rows per page:",
      displayRows: "of",
    },
    toolbar: {
      search: "Search",
      downloadCsv: "Download CSV",
      print: "Print",
      viewColumns: "View Columns",
      filterTable: "Filter Table",
    },
    filter: {
      all: "All",
      title: "FILTERS",
      reset: "RESET",
    },
    viewColumns: {
      title: "Show Columns",
      titleAria: "Show/Hide Table Columns",
    },
    selectedRows: {
      text: "row(s) selected",
      delete: "Delete",
      deleteAria: "Delete Selected Rows",
    },
  }
  ...
}

Thanks for taking an interest in the library and the github community!

The following commands should get you started:

open http://localhost:5050/ in browser

After you make your changes locally, you can run the test suite with npm test.

The files included in this repository are licensed under the MIT license.

Thank you to BrowserStack for providing the infrastructure that allows us to test in real browsers.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4