Getting Started

You can preview this example here

For any flex list you'll need to specify a container, this is the containerElement inside the renderer. For this example, there will also be a searchElement which is specified separately.

Each flex list is made up of:

• An ID field, how each row is identified to avoid duplicates
• A renderer, this is what creates the elements
• Item callbacks, these are what pull the data

Optionally, you can include:

• Search
• Pagination

The example below uses the dummyjson.com API as fake data.

const basicContainer = document.querySelector('#basicContainer') as HTMLDivElement;
const search = document.querySelector('#basicSearch') as HTMLInputElement;

let list = new FlexList({
    renderer: new BasicListRenderer({
        containerElement: basicContainer,
        renderItem: (item: ListItem) => {
            let product = item.data as Product;

            return product.title;
        }
    }),
    search: new Search({
        inputElement: search,
        fields: ['title']
    }),
    itemCallbacks: {
        load: async (page, limit) => getRows(page, limit),
        search: async (query, page, limit) => getRows(page, limit, query),
    },
    idField: 'id',
    noItemsText: 'There are currently no items.'
});```