Responsive column in SpladeTable

[thewebartisan7]

I did make a change in SpladeTable by adding a new prop to column named responsive.

When enabled then in th and td it's added a class for hide the cell by default and shown in certain breakpoint defined for each column using {$breakpoint}:table-cell.

Can I make PR for this?

Example in th:

            <th
                v-show="table.columnIsVisible(@js($column->key))"
                scope="col"
                class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
                :class="{
                    '{{ $column->responsive }}:table-cell hidden': @js($column->responsive)
                }"
            >

And in controller:

             SpladeTable::for($users)
                ->withGlobalSearch()
                ->defaultSort('-created_at')
                ->column(key: 'name', canBeHidden: false, sortable: true, searchable: true)
                ->column(key: 'email', sortable: true, searchable: true, responsive: 'lg')
                ->column(key: 'created_at', sortable: true, searchable: true, responsive: 'lg')
                ->column(key: 'actions', label: 'Actions');

I change the view body.blade.php, head.blade.php, and SpladeTable::column() method and Column class, by adding $responsive arguments which is default false:

    public function __construct(
        public string $key,
        public string $label,
        public bool $canBeHidden,
        public bool $hidden,
        public bool $sortable,
        public bool|string $sorted,
        public bool|string $responsive = false
    ) {
    }

[pascalbaljet]

I like the idea!

[thewebartisan7]

I can make PR if you wish

[pascalbaljet]

That would be great!

[thewebartisan7]

One thing that is required to archive this is to add a safelist of classes in tailwindconfig.js since it's not found using:

{{ $column->responsive }}:table-cell hidden': @js($column->responsive)

Like:

    safelist: [
        {
            pattern: /table-cell/,
            variants: ['sm', 'lg', 'xl'],
        },
    ],

It's that fine or you have better idea?