Fix double table border when no sorting or selection is enabled

[ajnsn]

Fixes #7632

• Changes have been thoroughly tested to not break existing functionality.
• Visual changes are explained in the PR description using a screenshot/recording of before and after.

This is a follow up for #7636. It changes the top part of the table to work with the parent divide-y by removing the css hidden class assignment when ! $isSelectionEnabled and ! count($sortableColumns) to an if-clause around the whole div.

This is to hide the current double border within a grid table when you are not having selections enabled or any sortable columns.

As Dan already stated here, the hidden class assignment must be there for a reason. But I cannot find any. If the table has no bulk actions, sortable columns etc, the part of the table imHo will always be hidden?

Before

After

[what-the-diff]

PR Summary

• Conditional Toggle in Interface
  • Implement a sort of 'switch' that shows or hides sections of the user interface, based on certain conditions. This adaptation makes for a neat and user-friendly interface.
• Check-box Addition
  • Include a new checkbox to the interface that visually indicates whether a specific function (reordering) is enabled or not. This provides users a clear view of what actions are available to them.
• Dynamic Sorting Feature
  • Enhance interface with a sorting function. Users can now choose how to order the columns—this flexibility empowers users to view data in a way that best suits their needs. The selection choices are generated automatically, ensuring the feature is always up-to-date.

[zepfietje]

IIRC, hidden is there for performance reasons or some issue that occurred in the past, Dan said.

[wychoong]

fyi, its from one of my PR to solve an issue #5977

[danharrin]

Can we replace divide-y with a class that accounts for hidden children? I feel like Tailwind does something very similar with space-*

[zepfietje]

@danharrin, that's what I used x-bind:hidden for in a couple of places, remember?

[danharrin]

@zepfietje is that an option here?

[ajnsn]

Thanks @wychoong for the reference!

Yes, we could apply the "hidden" attribute, either via an if statement or via x-bind, it's described here.

I can also change the PR, let me know which option do you prefer, Examples:

  <div
      @class([
          'flex items-center gap-4 gap-x-6 bg-gray-50 px-4 dark:bg-white/5 sm:px-6',
          'hidden' => (! $isSelectionEnabled) && (! count($sortableColumns)),
      ])
      {{-- x-bind:hidden="{{ (! $isSelectionEnabled) && (! count($sortableColumns)) }}" --}}
      {{-- x-bind:hidden="! (@js($isSelectionEnabled) || @js(count($sortableColumns)))" --}}
      @if (! $isSelectionEnabled && ! count($sortableColumns))
          hidden
      @endif
  >

In any case I see a lot of @ifstatements all over the place, e.g. alone in this div the @if ($isSelectionEnabled && (! $isReordering)) and the @if (count($sortableColumns)) are direct children. So for me it would be the increase the readability a lot if there's a simple @if above. This hidden-approach is difficult to interpret, imHo :)

[zepfietje]

It's hard for me to follow the exact issue and checking out the diff, but I guess simply using that Blade @if around everything is fine, as long as #5977 isn't reintroduced?

[ajnsn]

Afaik the structure in this PR was different. Here are screens of this PR without anything (even without search). Looks good to me.

[danharrin]

@if ((! $isSelectionEnabled) && (! count($sortableColumns))) hidden @endif

[zepfietje]

hidden attribute is only needed if a divide- child is rendered but hidden using x-show, @danharrin.

[danharrin]

Let's see if this presents any issues in the next release 👍