In this episode, we jump right into building the export modal for our data table. When you click the export button, we want to trigger a modal where you can confirm the export, and the logic will handle whether you've selected specific records (by their IDs) or are exporting everything.
We start by picking a handy package called yElementsModal
to make modal creation super simple, and go through installing it and wiring it up with Livewire. We then create a new ExportModal
Livewire component, making sure it extends the modal base from the package. After adding a basic template and hooking it to our export button, we test it out to see the modal popping up.
The modal itself is straightforward: it shows you how many records you're about to export and gives you options to start the export or cancel. We make sure that the 'cancel' button just closes the modal nicely, while the 'export' button triggers the export logic (which we'll build out more in the next step).
Next, we look at how to pass the selected record IDs and the model into the modal, so it can know what exactly you're exporting. We make sure this is generic so we can re-use the same modal for different data tables or models by just passing in different model class strings and selected ID arrays.
To display the correct number of records, we build a computed property: if you've selected some rows, it counts those; if you've selected none, it defaults to counting all records in the table. For usability, we add pluralization and format the numbers nicely (with commas for thousands) so it reads better, especially for big exports.
By the end of the episode, the modal is fully functional: it counts and formats the records properly, responds to button clicks, and can handle both exporting selected records or the whole dataset. Next up, we’ll actually build the export process itself!