try table component

Author: yshmarov

app/assets/tailwind/application.css

@@ -45,3 +45,30 @@
 .form-input {
   @apply block shadow-sm rounded-md border border-gray-400 outline-hidden px-3 py-2 mt-2 w-full;
 }
+
+/* Responsive table that displays as cards on mobile and table on desktop */
+.table-responsive {
+  @apply overflow-x-auto rounded-box border border-base-content/5 bg-base-100;
+}
+
+.table-responsive table {
+  /* @apply du-table du-table-zebra du-table-xs du-table-pin-rows w-full; */
+}
+
+.table-responsive thead {
+  @apply hidden lg:table-header-group;
+}
+
+.table-responsive tbody {
+  @apply block lg:table-row-group;
+}
+
+.table-responsive tr {
+  @apply block lg:table-row lg:mb-0 overflow-hidden lg:overflow-auto;
+}
+
+.table-responsive td {
+  @apply block lg:table-cell lg:text-left;
+  @apply before:content-[attr(data-label)] before:font-bold before:inline-block before:mr-2;
+  @apply lg:before:content-none;
+}

app/views/organizations/index.html.erb

@@ -10,28 +10,28 @@
       <%#= render collection: @organizations, partial: "organizations/organization", as: :organization %>
     </div>
 
-    <div class="overflow-x-auto rounded-box border border-base-content/5 bg-base-100">
-      <table class="du-table du-table-zebra du-table-xs du-table-pin-rows w-full">
-        <thead class="hidden lg:table-header-group">
+    <div class="table-responsive">
+      <table>
+        <thead>
           <tr>
             <th>Name</th>
             <th>Members count</th>
             <th>Created</th>
             <th>Actions</th>
           </tr>
         </thead>
-        <tbody class="block lg:table-row-group">
+        <tbody>
           <% @organizations.each do |organization| %>
-            <tr class="block lg:table-row lg:mb-0 overflow-hidden lg:overflow-auto">
-              <td class="block lg:table-cell lg:text-left before:content-[attr(data-label)] before:font-bold before:inline-block before:mr-2 lg:before:content-none" data-label="Name:">
+            <tr>
+              <td data-label="Name:">
                 <div class="flex items-center gap-2">
                   <%= organization_avatar(organization) %>
                   <%= organization.name %>
                 </div>
               </td>
-              <td class="block lg:table-cell lg:text-left before:content-[attr(data-label)] before:font-bold before:inline-block before:mr-2 lg:before:content-none" data-label="Members count:"><%= organization.memberships.count %></td>
-              <td class="block lg:table-cell lg:text-left before:content-[attr(data-label)] before:font-bold before:inline-block before:mr-2 lg:before:content-none" data-label="Created At:"><%= time_ago_in_words(organization.created_at) %> ago</td>
-              <td class="block lg:table-cell lg:text-left before:content-[attr(data-label)] before:font-bold before:inline-block before:mr-2 lg:before:content-none" data-label="Actions:"><%= link_to "Show", organization_path(organization), class: "text-blue-600 hover:underline" %></td>
+              <td data-label="Members count:"><%= organization.memberships.count %></td>
+              <td data-label="Created At:"><%= time_ago_in_words(organization.created_at) %> ago</td>
+              <td data-label="Actions:"><%= link_to "Show", organization_path(organization), class: "text-blue-600 hover:underline" %></td>
             </tr>
           <% end %>
         </tbody>