- Build a complete React DataTable progressively from scratch
- Configuration-driven columns with sorting, search, filtering, and pagination
- Accessible row selection with stable identity and indeterminate select-all
- Measured performance optimization instead of speculative memoisation
- Accessible column reordering and inline editing
- Hierarchical tree data with filtering, sorting, expansion, and pagination
- Server-side processing for large datasets with request cancellation
- Reusable headless useDataTable architecture supporting multiple views
- Price Free
- Sections 4
- Format PDF
Table of contents
- About This Book 2
- The One Mental Model to Keep 3
- Book Map 4
BUILDING THE DATATABLE
- 0. Start with an Empty React Application 5
- 1. Why Table Libraries Ask for a Columns Array 6
- 2. Sorting: Store the Choice, Derive the Rows 7
- 3. Search: Pipeline Order Starts to Matter 8
- 4. Pagination: Slice Only After the Row Pipeline 10
- 5. Identity and Selection: Stable IDs Around the Pipeline 11
- 6. Performance: Measure First, Then Memoise 13
- 7. Column Reordering: Move State, Not DOM Nodes 14
- 8. Editing: Who Owns the Data? 15
- 9. Tree Tables: Keep the Data Nested, Flatten the View 17
- 10. A Million Rows: Move the Pipeline, Not the Idea 19
- 11. Headless Architecture: Separate the Table Model from the Markup 21
UNDERSTANDING THE FINISHED SYSTEM
- 12. Read the Finished Component Like an Engineer 23
- 13. Accessibility Checklist Built into the Journey 24
- 14. A Practical Test Matrix 24
- 15. What to Add Before Calling It a Production Table 25
APPENDICES
- Appendix A. Final Configuration API at a Glance 25
- Appendix B. Minimal CSS Foundation 26
- Appendix C. Useful Repository Commands 26
About this ebook
BUILD A REACT DATATABLE FROM SCRATCH
Learn how to build a capable React DataTable from the ground up while understanding the engineering decisions behind every feature.
This step-by-step engineering guide builds a React DataTable progressively, starting with a semantic table driven by a columns array and adding one real engineering problem at a time.
You will build sorting, global search, per-column filtering, pagination, stable row identity, row selection, performance improvements, accessible column reordering, inline editing, hierarchical tree data, server-side processing, and finally a headless useDataTable model that can power multiple visual views.
The book focuses on the reasoning behind the component rather than simply giving you a finished implementation. You will learn what belongs in state, what should remain derived, how each feature fits into the data pipeline, and how features interact with one another.
Accessibility is built into the journey rather than added as an afterthought, including semantic table structure, accessible sorting, labelled search controls, pagination states, row selection, keyboard-operable column movement, editing controls, tree expansion, loading states, and accessible headless views.
Performance is approached through measurement rather than speculative optimisation, while stable identity is maintained across sorting, filtering, paging, editing, and tree expansion.
Every chapter begins with a working checkpoint so you can change one idea, run it, test it, and understand the result before moving forward.
By the end, you will have a reusable DataTable architecture and a clear mental model for extending it, including a headless model capable of driving both a semantic table and a card-based view.