ecorreiadev / Flatlist React
Licence: mit
A helpful utility component to handle lists in react like a champ
Stars: ✭ 34
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to Flatlist React
Vue Bootstrap4 Table
Advanced table based on Vue 2 and Bootstrap 4 ⚡️
Stars: ✭ 187 (+450%)
Mutual labels: filtering, sorting
Gridify
Easy and optimized way to apply Filtering, Sorting, and Pagination using text-based data.
Stars: ✭ 372 (+994.12%)
Mutual labels: sorting, filtering
React Table
⚛️ Hooks for building fast and extendable tables and datagrids for React
Stars: ✭ 15,739 (+46191.18%)
Mutual labels: filtering, sorting
Queryql
Easily add filtering, sorting, and pagination to your Node.js REST API through your old friend: the query string!
Stars: ✭ 76 (+123.53%)
Mutual labels: filtering, sorting
JqueryDataTablesServerSideDemo
Jquery DataTables with Asp.Net Core server side multi column sorting and searching Demo Project.
Stars: ✭ 43 (+26.47%)
Mutual labels: sorting, filtering
Vue Table Dynamic
🎉 A dynamic table with sorting, filtering, editing, pagination, multiple select, etc.
Stars: ✭ 106 (+211.76%)
Mutual labels: filtering, sorting
svelte-datagrid
Svelte data grid spreadsheet best best features and performance from excel
Stars: ✭ 48 (+41.18%)
Mutual labels: sorting, filtering
Vue List Scroller
Simple and easy to use Vue.js component for efficient rendering large lists
Stars: ✭ 65 (+91.18%)
Mutual labels: list, infinite-scroll
ag-grid
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
Stars: ✭ 8,743 (+25614.71%)
Mutual labels: sorting, filtering
Feedly Filtering And Sorting
Enhance the feedly website with advanced filtering and sorting capabilities
Stars: ✭ 73 (+114.71%)
Mutual labels: filtering, sorting
ember-sort-filter-table
A sortable/searchable table addon for ember cli
Stars: ✭ 13 (-61.76%)
Mutual labels: sorting, filtering
Masonic
🧱 High-performance masonry layouts for React
Stars: ✭ 209 (+514.71%)
Mutual labels: list, infinite-scroll
Vuejs Datatable
A Vue.js component for filterable and paginated tables.
Stars: ✭ 148 (+335.29%)
Mutual labels: filtering, sorting
React Intersection List
React infinite scroll using the Intersection <Observer /> API
Stars: ✭ 125 (+267.65%)
Mutual labels: list, infinite-scroll
Blazortable
Blazor Table Component with Sorting, Paging and Filtering
Stars: ✭ 249 (+632.35%)
Mutual labels: filtering, sorting
spring-boot-jpa-rest-demo-filter-paging-sorting
Spring Boot Data JPA with Filter, Pagination and Sorting
Stars: ✭ 70 (+105.88%)
Mutual labels: sorting, filtering
DynamicExpressions
A dynamic expression builder that can be used to dynamically sort and/or filter LINQ/EF queries
Stars: ✭ 29 (-14.71%)
Mutual labels: sorting, filtering
react-tabllist
React-based customizable style table or list components that support event and callback functions.
Stars: ✭ 20 (-41.18%)
Mutual labels: list, infinite-scroll
Ng2 Flex Table
Angular 4 Table - Beautiful Table especially made for non-relational databases. With inline editing, column search & filter and fixed headers.
Stars: ✭ 15 (-55.88%)
Mutual labels: sorting
FlatList React
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.
Dear React Native Developer
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.
Install
Make sure you are running react and react-dom version 16.8.0+.
npm install flatlist-react
Quick Start
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>
)
Full Documentation
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].