Skip to main content

Black Friday 2025! Only until December 1st: coupon FRIDAY25 for 40% off Yearly/Lifetime membership!

Read more here

Ordering By Columns with Font-Awesome Icons

Premium
9:33

The Full Lesson is Only for Premium Members

Want to access all of our courses? (29 h 14 min)

You also get:

54 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

MS
Marcos Sousa ✓ Link copied!

Amazing course!!! A note for posterity:

We can add a category_id: this.state.query.category_id, inside the query on orderChanged method to avoid the reset category when click on asc or desc icon

        this.setState(({
            query: {
                page: 1,
                category_id: this.state.query.category_id,
                order_column: column,
                order_direction: direction
            }
        }), () => this.fetchPosts());

Also inside the select of categories we can add

    <option value='all'>-- all categories --</option>

and on categoryChanged method

    categoryChanged(event) {
        const category_id = event.target.value;
        const categoryQuery = {
            query: category_id === 'all' ? { page: 1 } : { category_id, page: 1 }
        };

        this.setState(categoryQuery, () => this.fetchPosts());
    }

to list all results when choose all categories