【react表格组件】material-table基本用法&组件override

npm install material-table --save

import MaterialTable from 'material-table'

class APP extends Component{
    render(){
        return (
        

               注意，这个标签必须在标签旁引用
            
            ...
            
        
        );
    }
}

import React, { Component } from 'react';



import { withStyles } from '@material-ui/core/styles'; import MaterialTable from 'material-table'; import MTableToolbar from 'material-table/dist/m-table-toolbar'; import blue from '@material-ui/core/colors/blue'; import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles' import { Checkbox, TableCell } from '@material-ui/core'; import MTableBodyRow from 'material-table/dist/m-table-body-row'; import MTableHeader from 'material-table/dist/m-table-header'; https://material-ui.com/customization/themes/ const myTheme = createMuiTheme({ palette: { secondary:{ main: '#017FCB', // main: blue[400], // light: blue[400],  }, }, typography:{ useNextVariants: true, }, }); // override MTableBodyRow to change the color of tablebody_checkbox class MyMTableBodyRow extends MTableBodyRow{ renderSelectionColumn() { return (  {/* use createMuiTheme & MuiThemeProvider to change the style of tablebody_checkbox */}  <Checkbox checked={this.props.data.tableData.checked === true} OnClick={(e) => e.stopPropagation()} value={this.props.data.tableData.id.toString()} OnChange={(event) => this.props.onRowSelected(event, this.props.path)} color: #000000;">{{ paddingLeft: 12 + this.props.level * 20, }} />    ); } } class MyTableHeader extends MTableHeader{ renderSelectionHeader() { return ( <TableCell padding="none" key="key-selection-column" color: #0000ff;">this.props.headerStyle} > {/* use createMuiTheme & MuiThemeProvider to change the style of tableheader_checkbox */}  <Checkbox indeterminate={this.props.selectedCount > 0 && this.props.selectedCount <this.props.dataCount} checked={this.props.selectedCount === this.props.dataCount} OnChange={(event, checked) => this.props.onAllSelected && this.props.onAllSelected(checked)} />    ); } } // override MaterialTable to change toolbar & tablebody_checkbox & tableheader_checkbox class MyMaterialTable extends MaterialTable{ getProps(props){ const calculatedProps=super.getProps(props); // use css in js to change style of toolbar // change the calculatedProps.components.Toolbar in MaterialTable. // read the source code of material-table to get the variable name to change  calculatedProps.components.Toolbar=withStyles(styles)(MTableToolbar); calculatedProps.components.Row=MyMTableBodyRow; calculatedProps.components.Header=MyTableHeader; return calculatedProps; } } // change the background color of toolbar const styles = theme => ({ root: { paddingRight: theme.spacing.unit }, highlight: theme.palette.type === 'light' ? { color: theme.palette.secondary.main, // backgroundColor: blue[100], backgroundColor: '#98D3F2', } : { color: theme.palette.text.primary, backgroundColor: theme.palette.secondary.dark }, spacer: { flex: '1 1 10%' }, actions: { color: theme.palette.text.secondary, }, title: { flex: '0 0 auto' }, searchField: { paddingLeft: theme.spacing.unit * 2 } }); export default MyMaterialTable;

super();

super.fatherfunc();