A helpful react utility component intended to simplify handling rendering list with ease. It can handle grouping, sorting, filtering, searching, sorting, paginating, styling with very simple props.
This is not intended for React-Native usage. Although some features will still work, others will just break your application. Use at your own risk.
Make sure you are running react and react-dom version 16.8.0+.
npm install flatlist-react
Take in consideration the following list passed to component PeopleList:
// App.jsx
people = [
{firstName: 'Elson', lastName: 'Correia', info: {age: 24}},
{firstName: 'John', lastName: 'Doe', info: {age: 18}},
{firstName: 'Jane', lastName: 'Doe', info: {age: 34}},
{firstName: 'Maria', lastName: 'Carvalho', info: {age: 22}},
{firstName: 'Kelly', lastName: 'Correia', info:{age: 23}},
{firstName: 'Don', lastName: 'Quichote', info: {age: 39}},
{firstName: 'Marcus', lastName: 'Correia', info: {age: 0}},
{firstName: 'Bruno', lastName: 'Gonzales', info: {age: 25}},
{firstName: 'Alonzo', lastName: 'Correia', info: {age: 44}}
]
<PeopleList people={people}/>Now inside your component file, we create a function renderPerson that will be passed to renderItem:
// PeopleList.jsx
import FlatList from 'flatlist-react';
...
renderPerson = (person, idx) => {
return (
<li key={idx}>
<b>{person.firstName} {person.lastName}</b> (<span>{person.info.age}</span>)
</li>
);
}
...
return (
<ul>
<FlatList
list={this.props.people}
renderItem={this.renderPerson}
renderWhenEmpty={() => <div>List is empty!</div>}
sortBy={["firstName", {key: "lastName", descending: true}]}
groupBy={person => person.info.age > 18 ? 'Over 18' : 'Under 18'}
/>
</ul>
)