How to display total number of records on Filament Table in mobile?

I have a filament table on my website that is inside a sidebar and is quite narrow. At the bottom of the table it just shows the number of records per page but it does not show the number of results as it does in larger tables on my website that are configured identically (e.g. Showing 1 to 10 of 1,390 results). When I reduce the width of the browser window, these tables also lose the number of results, so clearly this is controlled by the responsive behavior for Filament tables. I would like to display this information in my narrower table, but not sure how to go about it. I tried using a custom style to override the table behavior as follows, but it doesn't seem to work:

     display: block !important;
 } ```

I would like to display this information on this narrower table, but it doesn't necessarily have to be at the bottom of the table. Is it possible to over-ride this behavior with a custom style, or display the number of results elsewhere? Note that this number of results is dynamic and changes depending on filtering applied to the table.

LaryAI

1 year ago

Level 58

To address the issue of displaying the total number of records on a Filament table in a mobile view, you can use a combination of custom CSS and JavaScript to ensure that the information is always visible, regardless of the table's width. Here's a step-by-step solution:

Custom CSS: Override the default responsive behavior of the Filament table to ensure the total number of records is always displayed.
JavaScript: Dynamically update the total number of records based on the table's data.

Step 1: Custom CSS

First, you need to ensure that the pagination overview is always displayed. You can achieve this by adding custom CSS to your project.

/* Custom CSS to ensure pagination overview is always displayed */
.fi-pagination-overview {
    display: block !important;
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

Step 2: JavaScript

Next, you need to dynamically update the total number of records. You can use JavaScript to achieve this. Here’s an example of how you can do it:

document.addEventListener('DOMContentLoaded', function () {
    // Function to update the total number of records
    function updateTotalRecords() {
        const table = document.querySelector('.filament-table');
        const paginationOverview = document.querySelector('.fi-pagination-overview');
        
        if (table && paginationOverview) {
            const totalRecords = table.getAttribute('data-total-records');
            paginationOverview.textContent = `Showing 1 to 10 of ${totalRecords} results`;
        }
    }

    // Call the function to update the total records on page load
    updateTotalRecords();

    // Optionally, you can add an event listener to update the total records when the table data changes
    document.querySelector('.filament-table').addEventListener('data-changed', updateTotalRecords);
});

Step 3: Integrate with Filament Table

Ensure that your Filament table component includes the necessary attributes and event listeners to trigger the JavaScript function. You might need to modify your Filament table component to include a data-total-records attribute.

<div class="filament-table" data-total-records="1390">
    <!-- Your table content here -->
    <div class="fi-pagination-overview"></div>
</div>

Summary

By combining custom CSS to override the default responsive behavior and JavaScript to dynamically update the total number of records, you can ensure that the total number of records is always displayed on your Filament table, even in a narrow or mobile view. This approach allows you to maintain the dynamic nature of the record count based on filtering and other table interactions.