Cómo mostrar los datos que obtuve de la API a la tabla de datos de material de reacción

Soy nuevo cuando uso la tabla materialUI en react.js, quiero intentar usar la tabla react-material pero me perdí, ¿cómo puedo mostrar mis datos en la tabla? Digamos que tengo 28 datos y, de hecho, ya muestra el número correcto en la paginación pero los datos en sí no muestran nada. este es el enlace de documentación para la tabla de material de reacción Mira esto.

Ya leí varios temas sobre esto, pero todos usan tableRow, tableHead, etc.

este es el código de mi componente:

import React, { Component } from 'react';
import MaterialTable from 'material-table';
import { history } from '../../../../Helpers/history';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { orderActions } from '../../../../Actions/orderActions';
import { withStyles } from '@material-ui/core/styles';

// Component
import './tabledata.css';

const styles = theme => ({
  '@global': {
    body: {
      backgroundColor: theme.palette.common.white,
    },
  },
});

class Tabledata extends Component {
  constructor(props) {
    super(props);
    // const { orders } = this.props;

    this.state = {
      columns: [
        { title: 'Nama Pemesanan', field: 'name' },
        { title: 'Status', field: 'status' },
        { title: 'Estimasi Pengerjaan (Hari)', field: 'estimate', type: 'numeric' },
        { title: 'Jumlah Pesanan (pcs)', field: 'unit', type: 'numeric' },
        { title: 'Harga (Rp)', field: 'price', type: 'numeric' },
      ],
      data: [
        {
          id: 2,
          name: 'lala',
          status: 'Penyablonan',
          estimate: 8,
          unit: 36,
          price: '36.000.000',
        },
      ],
    }
  }

  componentDidMount() {
  if(localStorage.getItem('auth')) {
      const { dispatch } = this.props;
      dispatch(orderActions.getAllOrder());
      // history.push('/dashboard');
      }
  }

  componentWillReceiveProps(newProps){
      this.setState({ loading: newProps.loading }); // remove the loading progress when logged in or fail to log in
  }

  handleChange = prop => event => {
      this.setState({ [prop]: event.target.value });
  };

  change(data){
      console.log("Check ID : ", data);
  }

  render(){
    const { orders } = this.props;
    console.log("test console : ", orders)

    return (
      <div className="tabledata-order">
          <div className="row item-section">
              <div className="col">
                  <div className="card">
                      <div className="card-body">
                          <MaterialTable
                              title="Daftar Pesanan"
                              columns={this.state.columns}
                              key={orders._id}
                              data={orders}
                          />
                      </div>
                  </div>
              </div>
          </div>
      </div>
    );
  }
}

Tabledata.propTypes = {
  classes: PropTypes.object.isRequired
};

const mapStateToProps = (state) => {
  const { orders } = state.orderPage;
  return {
      orders
  };
}

const connectedTableDataPage = withRouter(connect(mapStateToProps, '', '', {
  pure: false
}) (withStyles(styles)(Tabledata)));

export { connectedTableDataPage as Tabledata };

Como puede ver, esta tabla de materiales tiene un componente como este

<MaterialTable
 title="Daftar Pesanan"
 columns={this.state.columns}
 key={orders._id}
 data={orders}
/>

Como puede ver, en la parte inferior de la imagen puede ver 1-5 of 28 y en mi consola hay exactamente 28 data pero la tabla en sí no no mostrar ningún dato

¿alguien puede ayudarme? como puedo mostrar los datos en orders y este es el ejemplo de la imagen json que tengo: