How to Wrap Material-ui ListItem in a Virtualized Virtualized Automobile Plant

Question

I used the material components ui List and ListItem. In particular, I used the functionality of nested elements. See http://www.material-ui.com/#/components/list about half way down the page you will see a Nested List. The fact is that material-ui takes care of nesting issues, such as indentation, as well as the expand / contract arrow.

As soon as I added a lot of elements, I realized that the list is very slow. So I accidentally ran into AutoSizer from virtualized interaction. The problem is that in a Victorized response, my code will have to provide the rowRenderer function for each row. I do not want to lose the built-in material functionality that defines the indentation for nested elements. However, using AutoSizer, it seems to me that my code will have to do individual work to figure out the indentation. In addition, my code should have used the expand / contract arrow. It is currently supplied free with the -ii List / ListItem material.

Any tips or suggestions?

thanks

Answer 1

You might want to use a "virtual" list library, for example, this: https://github.com/bvaughn/react-virtualized.

Typically, these libraries give you the ability to create a custom list container and a custom list item.

Here is a sample code on how to do this:

import ListItem from "@material-ui/core/ListItem"; import ListItemText from "@material-ui/core/ListItemText"; // NOTE: Your import path for react-virtualized may be different if you are // using TypeScript or ES6/Babel or UMD modules. import { List } from "react-virtualized"; class MyComponent extends React.Component { constructor(props) { super(props); this.state = { ids: ["abc", "def", "ghi"] }; } // the rowRenderer function is given an object with a lot more stuff // in it: https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md rowRenderer = ({ key, index, style }) => { const value = this.state.ids[index]; return ( <ListItem key={key} style={style}> <ListItemText>{value}</ListItemText> </ListItem> ); } render() { return ( <List height={150} width={250} rowHeight={30} rowCount={this.state.ids.length} rowRenderer={this.rowRenderer} /> ); } } 

Answer 2

It looks like the ListItem component has a prop called nestedLevel . Taking an example in material-ui docs, try the following:

 ... <ListItem primaryText="Drafts" nestedLevel={3} leftIcon={<ContentDrafts />}/> ... 

This should result in:

But remember the warning:

This property is automatically managed, so change it at your own risk.