i am using loopback 3 developed api load into react admin using react admin loopback package.my doubt is i am write remote api id based get list of values in my response.its result how to load react admin datagrid.
This i am try to load into my react admin based on react admin loopback.this standard template id passed to my template page.this id based call the api and load into datagrid.i dont know? how to pass the api in datagrid
StandardTemplate.js
import React, { Component } from 'react';
import {
List,
SimpleList,
Responsive,
Datagrid,
TextField,
EditButton,
ShowButton, Edit, SimpleForm, TextInput
} from 'react-admin';
import { Link } from 'react-router-dom';
import { Config } from '../../config';
import { Button } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
const styles = {
button: {
fontWeight: 'bold',
// This is JSS syntax to target a deeper element using css selector, here the svg icon for this button
'& svg': { color: 'orange' }
},
};
const MyEditButton = withStyles(styles)(({ classes, ...props }) => (
<Button source="id"
component={Link}
to={{
pathname: `/template/${props.record.id}`
// state: { id: props.record.id }
}}
>
Templates
</Button>
));
class StandardTemplateList extends Component {
componentDidMount() {
console.log(this.props);
document.title = Config.app.name + ' - StandardTemplate';
}
render() {
return (
<List {...this.props}>
<Responsive
small={
<SimpleList
primaryText={record => record.name}
secondaryText={record => `${record.services} views`}
tertiaryText={record => new Date(record.createdAt).toLocaleDateString()}
/>
}
medium={<Datagrid>
<TextField source="id" />
<TextField source="name" />
<TextField source="format" />
<TextField source="services" />
<TextField source="createdby" />
<MyEditButton />
<EditButton />
<ShowButton />
</Datagrid>
}
/>
</List>
);
}
}
export default StandardTemplateList;
Template.js
import React, { Component } from 'react';
import {
List,
SimpleList,
Responsive,
Datagrid,
TextField,
EditButton,
ShowButton
} from 'react-admin';
import { Link } from 'react-router-dom';
import { GET_LIST,GET_ONE } from 'react-admin';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import dataProvider from '../../dataProvider';
import { Button } from '@material-ui/core';
class TemplateList extends Component {
componentDidMount() {
console.log(this.props);
document.title = Config.app.name + ' - Template';
}
render() {
return (
<List {...this.props}>
<Responsive
small={
<SimpleList
primaryText={record => record.name}
secondaryText={record => `${record.services} views`}
tertiaryText={record => new Date(record.createdAt).toLocaleDateString()}
/>
}
medium={
<Datagrid>
<TextField source="id" />
<TextField source="name" />
<TextField source="createdby" />
<EditButton />
<ShowButton />
</Datagrid>
}
/>
</List>
) }
}
export default TemplateList;