Material-table: How connect the lookup properties with Rest API result, and how open a Form from actions button in table.

Created on 13 Jun 2019 · 7Comments · Source: mbrn/material-table

I need help. I using the control Material-Table. I need load the result of a call to Rest API, this return as result, a set the data on a json of object, and the examples that I could find, show a structure as {1: 'One', 2: 'Two', 3: 'Three'}. How I can relationship my data with this property.

In other hand, I need add a Button in a cell for each row, and show a modal dialog with a form, when do clic, with the data in the register where was the button, for can update the datas.

I hope be clear.

Regards

Javier

help wanted

Source

jochercoles

Most helpful comment

Thank you for your help. In this moment I complicate with the time.

No problem, thank you so much.

Regards.

Javier.

jochercoles on 13 Jun 2019

😄2 👍1

All 7 comments

Hi @jochercoles

You can load your data to state on componentDidMount.
You can use custom render feature to render a button inside a cell. Please take a look at documentation

mbrn on 13 Jun 2019

Hi Mehmet, now, good morning in Argentine. Thank you for your anwser. Yes, I loaded the data in a variable or property in the state on componentDidMount. I can add the button in the cells, but I have a form, created as component (Form.js), but I can't show it. I add the handler for the clic event of button, and if I add alert('any message'), show the message when I press over the button.
I review all Documentation, but the examples, don't help me with my issue.
Thank you.
Regards.
Javier.

jochercoles on 13 Jun 2019

You can show your form on a dialog. Just open dialog when button pressed.

mbrn on 13 Jun 2019

Can you share your code please?

mbrn on 13 Jun 2019

Main page:

import React, { Component } from 'react';
import AutoComplete from './AutoComplete';
import EditableGrid from './EditableGrid';

export class ABMPatenteDescuento extends Component {
displayName = ABMPatenteDescuento.name

constructor(props) {
super(props);
this.state = {
title: "Asociación de Patentes con Tipos de Descuentos de Combustibles",
patentesDescuentos: [],
tiposdescuentos: [],
sociedades: [],
patentes: [],
dels: [],
delsForTable: [],
isLoaded: false,
showFormEditable: false,
}
}

componentDidMount() {
var ourHeader = new Headers();

ourHeader.append('Content-Type', 'application/json');
ourHeader.append('Access-Control-Allow-Origin', '*');
ourHeader.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
ourHeader.append('Accept', 'application/json');
ourHeader.append('Access-Control-Allow-Headers', 'X-Requested-With');


fetch('http://localhost:54535/api/patentesdescuentos', {
  headers: ourHeader
})
  .then(resPatentesDescuentos => resPatentesDescuentos.json())
  .then(json => {
    this.setState({
      isLoaded: true,
      patentesDescuentos: json,
    })
  });

fetch('http://localhost:54535/api/tiposdescuentos', {
  headers: ourHeader
})
  .then(resTiposDescuentos => resTiposDescuentos.json())
  .then(json => {
    this.setState({
      isLoaded: true,
      tiposdescuentos: json,
    })
  });

fetch('http://localhost:54535/api/sociedades', {
  headers: ourHeader
})
  .then(resSociedades => resSociedades.json())
  .then(json => {
    this.setState({
      isLoaded: true,
      sociedades: json,
    })
  });

fetch('http://localhost:54535/api/patentes', {
  headers: ourHeader
})
  .then(resPatentes => resPatentes.json())
  .then(json => {
    this.setState({
      isLoaded: true,
      patentes: json,
    })
  });

fetch('http://localhost:54535/api/dels', {
  headers: ourHeader
})
  .then(resDels => resDels.json())
  .then(json => {
    this.setState({
      isLoaded: true,
      dels: json,
      delsForTable: json,
    })
  });

}

render() {
var { isLoaded } = this.state;
console.clear();

if (!isLoaded) {
  return (
    <div>Cargando...</div>
  );
}
else {
  return (
    <div>
      <h2>{this.state.title}</h2>
      <div id="divFilters" style={{ position: 'absolute', zIndex: 2 }} >
        <AutoComplete BindData={[this.state.dels, this.state.patentes, this.state.tiposdescuentos, this.state.sociedades]} FilterFields={["nombre", "patenteDescripcion", "descripcion", "sociedadDescripcion"]} />
      </div>
      <div id="divEditableGrid" style={{ position: 'relative', zIndex: 1 }}>
        <EditableGrid SourceGrid={this.state.patentesDescuentos} SourceComboUsrPlazaDescuento={this.state.delsForTable} SourceComboSociedades={this.state.sociedades} />
      </div>
    </div>
  );
}

}
}

Grid page o component.

import React from 'react';
import MaterialTable from 'material-table';
import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';
import Form from './Form';

export default function EditableGrid(Properties) {

const tableIcons = {
Add: AddBox,
Check: Check,
Clear: Clear,
Delete: DeleteOutline,
DetailPanel: ChevronRight,
Edit: Edit,
Export: SaveAlt,
Filter: FilterList,
FirstPage: FirstPage,
LastPage: LastPage,
NextPage: ChevronRight,
PreviousPage: ChevronLeft,
ResetSearch: Clear,
Search: Search,
SortArrow: ArrowUpward,
ThirdStateCheck: Remove,
ViewColumn: ViewColumn
};

let tiposdescuentos = { 0: 'SIN IDENTIFICAR', 1: 'LARGA DISTANCIA', 2: 'REPARTO', 3: 'RETIRO', 4: 'NO DESCUENTA COMBUSTIBLE' };
let sociedades = { 1100: "ALSA", 1200: "CASA" };

let [state, setState] = React.useState({
columns: [
{ title: 'usrPlazaDescuento', field: 'usrPlazaDescuento', hidden: true },
{ title: 'Usuario Plaza Descuento', field: 'nombre' },
{ title: 'Patente', field: 'patente' },
{ title: 'Tipo Descuento', field: 'tipoDescuentoId', lookup: tiposdescuentos },
{ title: 'Sociedad', field: 'sociedadId', lookup: sociedades },
],
data: [],
});

state.data = Properties.SourceGrid;

function Edit_onClick(data) {
return (

);
}

return (
title=""
icons={tableIcons}
columns={state.columns}
data={state.data}
actions={[{
icon: Edit,
tooltip: 'Editar el registro',
onClick: (event, rowData) => Edit_onClick(rowData)
}]}
/>
);
}

Form page or component. _This is an example downloaded from the web site of material-ui.com_

import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

export default function FormDialog(Properties) {
const [open, setOpen] = React.useState(Properties.Visible);

function handleClose() {
setOpen(false);
}

function handleUpdate() {
setOpen(false);
}

return (

Edición

      </table>
    </DialogContent>
    <DialogActions>
      <Button onClick={ handleUpdate } color="primary">
        Actualizar
      </Button>
      <Button onClick={ handleClose } color="primary">
        Cancelar
      </Button>
    </DialogActions>
  </Dialog>
</div>

);
}

Thank you for your help.

jochercoles on 13 Jun 2019

@jochercoles

Your code is very long to read. Can you create a sandbox please?

mbrn on 13 Jun 2019

Thank you for your help. In this moment I complicate with the time.

No problem, thank you so much.

Regards.

Javier.

jochercoles on 13 Jun 2019

😄2 👍1