JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Unable to load data into grid. › Reply To: Unable to load data into grid.
August 24, 2020 at 10:08 am
#100993
Member
Hi Hao Siong Ng,
the ProjectCategoryPage
function seems to be working properly when loaded in a default React App:
import React from "react";
import ReactDOM from "react-dom";
import { Smart, Grid } from 'smart-webcomponents-react/grid';
const ProjectCategoryPage = () => {
const dataSource = new Smart.DataAdapter({
dataSource: [
{
EmployeeID: 1,
FirstName: 'Nancy',
LastName: 'Davolio',
ReportsTo: 2,
Country: 'USA',
Title: 'Sales Representative',
HireDate: '1992-05-01 00:00:00',
BirthDate: '1948-12-08 00:00:00',
City: 'Seattle',
Address: '507 – 20th Ave. E.Apt. 2A',
},
],
keyDataField: 'EmployeeID',
parentDataField: 'ReportsTo',
id: 'EmployeeID',
dataFields: [
'EmployeeID: number',
'ReportsTo: number',
'FirstName: string',
'LastName: string',
'Country: string',
'City: string',
'Address: string',
'Title: string',
'HireDate: date',
'BirthDate: date',
],
});
const columns = [
{
label: 'First Name',
dataField: 'FirstName',
width: 200,
},
{
label: 'Last Name',
dataField: 'LastName',
width: 200,
},
{
label: 'Reports To',
dataField: 'ReportsTo',
width: 200,
},
];
return (
// <AppPage screen='administration.projectCategory'>
<div className='col-12'>
<Grid
id='grid'
dataSource={dataSource}
columns={columns}
/>
</div>
/* </AppPage> */
);
};
class App extends React.Component {
render() {
return ProjectCategoryPage();
}
}
ReactDOM.render(<App />, document.querySelector("#root"));
export default App;
Can you provide the code for the AppPage
React component because the issue seems to be there ?
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com