Reply To: Unable to load data into grid.

[Hristofor]

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