Building Table Views with Phoenix LiveView

Advanced Table UIs for Accessible Data

by Peter Ullrich

Data is at the core of every business, but it is useless if nobody can access and analyze it. Learn how to generate business value by making your data accessible with advanced table UIs. This definitive guide teaches you how to bring your data to the fingertips of nontechnical users with advanced features like pagination, sorting, filtering, and infinity scrolling. Build reactive and reuseable table components by leveraging Phoenix LiveView, schemaless changesets, and Ecto query composition. Table UIs are the bread and butter for every web developer, so it is time to learn how to build them right.

About the Pragmatic Answers Series

Sometimes “right now” just isn’t soon enough. When you’re facing a hard deadline and need features that work and code that passes all the tests, there’s no time to hunt through forums and dubious blog posts hoping to stumble across a solution. You need accurate information from experts you trust. You need hands-on instruction that gets right to the point. You need Pragmatic Answers.

As a web developer, you have to build tables. Lots and lots of tables. With table UIs making up such a significant part of your daily work, you need to know how to build the right table for the task, with all the needed features. Building a simple table is easy, but tables only become really useful with advanced features like pagination, sorting, and filtering. That’s where building a table can quickly become complicated. This book shows you how to implement advanced table features in a clean and reusable way.

You’ll build fast and interactive table UIs by leveraging Phoenix LiveView. Make vast amounts of data manageable with common but complex features like pagination, sorting, filtering, and inifinity scrolling. Use SOLID coding principles to make your queries reusable with query composition. Compartmentalize your UI with LiveComponents and learn how to handle user input securely with schemaless changesets. Share your view onto the data painlessly by storing your search parameters in the URL.

Data is one of the most valuable assets of your business, but you cannot unlock its potential if you don’t know how to make it accessible. This book shows you how to deliver that data to your users’ fingertips quickly.

• Errata, typos, suggestions

• Source Code (zip file)

Releases:

• P1.0 2023/01/09
• B3.0 2022/11/16
• B2.0 2022/08/23
• B1.0 2022/06/28

• Preface
• Introduction
• Building a simple Table UI
  • Creating the Schema and Context
  • Creating the LiveView
  • Wrapping Up
• Sorting the Table
  • Sorting the Data in the Database
  • Setting Up LiveView excerpt
  • Sorting with LiveComponent
  • Parsing and Assigning the Sorting Parameters
  • Putting the SortingForm to Use
  • Wrapping up
• Filtering the Table
  • Filtering in the Database
  • Creating the Filter LiveComponent
  • Adding the Filter to the LiveView
  • Wrapping Up
• Paginating the Table
  • Paginating in the Database excerpt
  • Creating the Pagination LiveComponent
  • Adding Pagination to the LiveView
  • Wrapping Up
• Paginating the Table using Infinity Scrolling
  • Setting up the Context
  • Creating the LiveView excerpt
  • Adding the LiveView Client Hook
  • Wrapping Up