[tables] Hide column on mobile/ tablet

[ArvidDeJong]

I would like to propose an enhancement for Flux to improve the responsiveness of tables, especially on mobile and tablet devices. The idea is to introduce a class or property that allows developers to specify columns that should be hidden when the screen width falls below a certain threshold.

Use Case:

When displaying tables on smaller screens, certain columns may not be crucial to show and can disrupt the layout or readability. For example:

On desktop, all columns are visible.
On tablets, some columns are hidden.
On mobile devices, only the most essential columns are displayed.

Benefits:

Enhances the usability of Flux tables on smaller screens.
Eliminates the need for developers to manually write custom CSS or override table rendering for responsive behavior.
Provides a built-in, consistent approach to handling responsiveness within the package.

[jeffchown]

@ArvidDeJong For something like this, imho Tailwind CSS is perfect. To create something 'custom' in Flux would probably only lead to duplicating the Tailwind CSS syntax/approach.

e.g. (using the 2nd table example from the Flux docs), to hide the Amount column on screens smaller than md, you apply class="hidden md:table-cell":

<flux:table>
    <flux:columns>
        <flux:column>Customer</flux:column>
        <flux:column>Date</flux:column>
        <flux:column>Status</flux:column>
        <flux:column class="hidden md:table-cell">Amount</flux:column>
    </flux:columns>

    <flux:rows>
        <flux:row>
            <flux:cell>Lindsey Aminoff</flux:cell>
            <flux:cell>Jul 29, 10:45 AM</flux:cell>
            <flux:cell><flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge></flux:cell>
            <flux:cell variant="strong" class="hidden md:table-cell">$49.00</flux:cell>
        </flux:row>

        <flux:row>
            <flux:cell>Hanna Lubin</flux:cell>
            <flux:cell>Jul 28, 2:15 PM</flux:cell>
            <flux:cell><flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge></flux:cell>
            <flux:cell variant="strong" class="hidden md:table-cell">$312.00</flux:cell>
        </flux:row>

        <flux:row>
            <flux:cell>Kianna Bushevi</flux:cell>
            <flux:cell>Jul 30, 4:05 PM</flux:cell>
            <flux:cell><flux:badge color="zinc" size="sm" inset="top bottom">Refunded</flux:badge></flux:cell>
            <flux:cell variant="strong" class="hidden md:table-cell">$132.00</flux:cell>
        </flux:row>

        <flux:row>
            <flux:cell>Gustavo Geidt</flux:cell>
            <flux:cell>Jul 27, 9:30 AM</flux:cell>
            <flux:cell><flux:badge color="green" size="sm" inset="top bottom">Paid</flux:badge></flux:cell>
            <flux:cell variant="strong" class="hidden md:table-cell">$31.00</flux:cell>
        </flux:row>
    </flux:rows>
</flux:table>

[ArvidDeJong]

Thanks, but that approach doesn't work.
The column stays hidden on a larger screen, it looks like it ignores "md:table-cell" :(

[jeffchown]

Works fine when tested on my end. This is the method I use in my apps all then time.

Did you run php artisan view:clear and npm run dev (or build)?

Can you provide the code you are using?

[ArvidDeJong]

Oops.
You are right, now it works.

Ps. I use npm run build