Props: dataSource const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
<ListViewComponent dataSource={items}></ListViewComponent> | Props: dataSource const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
<ListView dataSource={items}></ListView> | The dataSource prop is supported in both EJ2 React and React. |
Props: fields const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }}></ListViewComponent> | Props: fields const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }}></ListView> | The fields prop is supported in both EJ2 React and React.
Note: EJ2 also supports fields.selected and fields.isChecked (or checked) for selection/checkbox behavior. The React ListView has no built-in selection or checkbox behavior, so these field mappings are not available. Use component state and itemTemplate to emulate if needed. |
Props: query const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }} query={new Query().where('Id', 'equal', '1')}></ListViewComponent> | Props: query const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }} query={new Query().where('id', 'equal', '1')}></ListView> | The query prop is supported in both EJ2 React and React. |
Props: sortOrder const items = [
{ Id: '1', Text: 'Banana' },
{ Id: '2', Text: 'Apple' }
];
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }} sortOrder={SortOrder.Ascending}></ListViewComponent> | Props: sortOrder const items = [
{ id: '1', text: 'Banana' },
{ id: '2', text: 'Apple' }
];
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }} sortOrder={SortOrder.Ascending}></ListView> | The sortOrder prop is supported in both EJ2 React and React. |
Props: enabled const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
<ListViewComponent dataSource={items} enabled={false}></ListViewComponent> | Props: disabled const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
<ListView dataSource={items} disabled={true}></ListView> | The enabled prop in EJ2 React is replaced by disabled prop in React. |
Props: headerTemplate const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
const Header = () => (<div>Header</div>);
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }} headerTemplate={Header()}></ListViewComponent> | Props: headerTemplate const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }} headerTemplate={<div>Header</div>}></ListView> | The headerTemplate prop is supported in both EJ2 React and React. |
Props: footerTemplate const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
const Footer = () => (<div>Footer</div>);
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }} footerTemplate={Footer()}></ListViewComponent> | Props: footerTemplate const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }} footerTemplate={<div>Footer</div>}></ListView> | The footerTemplate prop is supported in both EJ2 React and React. |
Props: itemTemplate const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
const Item = (data: any) => (<div>{data.Text}</div>);
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }} itemTemplate={Item}></ListViewComponent> | Props: itemTemplate const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
const Item = (data: any) => (<div>{data.text}</div>);
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }} itemTemplate={Item}></ListView> | The itemTemplate prop is supported in both EJ2 React and React. |
Props: groupTemplate const items = [
{ Id: '1', Text: 'Item 1', Group: 'A' },
{ Id: '2', Text: 'Item 2', Group: 'A' }
];
const Group = (data: any) => (<div>{data.items[0].Group}</div>);
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text', groupBy: 'Group' }} groupTemplate={Group}></ListViewComponent> | Props: groupTemplate const items = [
{ id: '1', text: 'Item 1', group: 'A' },
{ id: '2', text: 'Item 2', group: 'A' }
];
const Group = (data: any) => (<div>{data.items[0].group}</div>);
<ListView dataSource={items} fields={{ id: 'id', text: 'text', groupBy: 'group' }} groupTemplate={Group}></ListView> | The groupTemplate prop is supported in both EJ2 React and React. |
Props: enableRtl const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }} enableRtl={true}></ListViewComponent> | Props: dir const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
<Provider dir='rtl'>
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }}></ListView>
</Provider> | The enableRtl prop is supplied via dir="rtl" on a Provider in React. |
Props: enableVirtualization const items = Array.from({ length: 1000 }, (_, i) => ({ Id: String(i), Text: 'Item ' + i }));
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }} enableVirtualization={true}></ListViewComponent> | Props: virtualization const items = Array.from({ length: 1000 }, (_, i) => ({ id: String(i), text: 'Item ' + i }));
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }} virtualization={{ itemSize: 40, pageSize: 12, overscanCount: 4 }}></ListView> | The enableVirtualization prop in EJ2 React is replaced by virtualization in React. |
Props: headerTitle const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }} headerTitle={'My List'}></ListViewComponent> | Props: headerTemplate const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }} headerTemplate={<div>My List</div>}></ListView> | The headerTitle prop in EJ2 React is replaced by headerTemplate in React. |
Props: cssClass const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }} cssClass={'my-list'}></ListViewComponent> | DOM: className const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }} className={'my-list'}></ListView> | The cssClass prop in EJ2 React is replaced by className in React. |
Props: height const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }} height={'200px'}></ListViewComponent> | DOM: style.height const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }} style={{ height: '200px' }}></ListView> | The height prop in EJ2 React is replaced by inputProps (pass style or attributes) in React. |
Props: width const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }} width={'400px'}></ListViewComponent> | DOM: style.width const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }} style={{ width: '400px' }}></ListView> | The width prop in EJ2 React is replaced by inputProps (pass style or attributes) in React. |
Props: htmlAttributes const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }} htmlAttributes={{ id: 'my-list', 'data-testid': 'list' }}></ListViewComponent> | DOM: valid attributes const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }} id='my-list' data-testid='list'></ListView> | The htmlAttributes prop in EJ2 React is replaced by passing valid DOM attributes (e.g., id, data-*) directly on the ListView element in React. |
Props: showCheckBox const items = [
{ Id: '1', Text: 'Item 1' },
{ Id: '2', Text: 'Item 2' }
];
<ListViewComponent dataSource={items} fields={{ id: 'Id', text: 'Text' }} showCheckBox={true}></ListViewComponent> | Use: itemTemplate const items = [
{ id: '1', text: 'Item 1' },
{ id: '2', text: 'Item 2' }
];
const Item = (data: any) => (
<>
<CheckBox />
<div>{data.text}</div>
</>
);
<ListView dataSource={items} fields={{ id: 'id', text: 'text' }} itemTemplate={Item}></ListView> | EJ2 showCheckBox has no direct prop in React. Render a checkbox per item using itemTemplate (e.g., with a CheckBox component) and manage checked state in your app. |