table config

app/legacy/templates/legacy/datacrud_list.html

 
     <!-- Data Table -->
     <div class="clear-both bg-white shadow rounded-lg overflow-x-auto">
-        <table class="w-full border-collapse border border-gray-200 table-fixed">
-            <thead>
-                <tr class="bg-gray-100 text-left text-sm uppercase">
-                    {% for field in fields %}
-                      <th class="border border-gray-200 px-4 py-2 text-left">{{ field.verbose_name }}</th>
-                    {% endfor %}
-                    <th class="py-2 px-4 border-b">Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for obj in page_obj %}
-                    <tr class="hover:bg-gray-50">
-                        {% for field in fields %}
-                        <td class="border border-gray-200 px-4 py-2 whitespace-nowrap">
-                           {% if field.name == 'id' %}
-                              <a href="{% url  update_url obj.pk %}" class="text-blue-500 hover:underline">
-                                  {{ obj|attr:field.name }}
-                              </a>
-                          {% else %}
-                             {{ obj|attr:field.name}}
-                          {% endif %}
-                        </td>
-                        {% endfor %}
-                        <td class="py-2 px-4 border-b whitespace-nowrap">
-                            <a href="{% url  update_url obj.pk %}" 
-                              class="bg-blue-500 text-white px-3 py-2 rounded hover:bg-blue-600">Edit</a>
-                            <a href="{% url delete_url obj.pk %}" 
-                              class="bg-red-500 text-white px-3 py-2 rounded hover:bg-red-600">Delete</a>
-                        </td>
-                    </tr>
-                {% empty %}
-                    <tr>
-                        <td colspan="5" class="py-4 px-4 text-center text-gray-600">No data available.</td>
-                    </tr>
+<table class="w-full border-collapse border border-gray-200">
+    <thead>
+        <tr class="bg-gray-100 text-left text-sm uppercase">
+            {% for field in fields %}
+                <th class="border border-gray-200 px-4 py-2 text-left">{{ field.verbose_name }}</th>
+            {% endfor %}
+            <th class="py-2 px-4 border-b">Actions</th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for obj in page_obj %}
+            <tr class="hover:bg-gray-50">
+                {% for field in fields %}
+                <td class="border border-gray-200 px-4 py-2">
+                    {% if field.name == 'id' %}
+                        <a href="{% url update_url obj.pk %}" class="text-blue-500 hover:underline">
+                            {{ obj|attr:field.name }}
+                        </a>
+                    {% else %}
+                        {{ obj|attr:field.name }}
+                    {% endif %}
+                </td>
                 {% endfor %}
-            </tbody>
-        </table>
+                <td class="py-2 px-4 border-b">
+                    <a href="{% url update_url obj.pk %}" 
+                       class="bg-blue-500 text-white px-3 py-2 rounded hover:bg-blue-600">Edit</a>
+                    <a href="{% url delete_url obj.pk %}" 
+                       class="bg-red-500 text-white px-3 py-2 rounded hover:bg-red-600">Delete</a>
+                </td>
+            </tr>
+        {% empty %}
+            <tr>
+                <td colspan="5" class="py-4 px-4 text-center text-gray-600">No data available.</td>
+            </tr>
+        {% endfor %}
+    </tbody>
+</table>
     </div>
 
     <!-- Pagination -->
         </div>
     </div>
 </div>
+<style>
+/* Remove fixed layout and allow columns to grow dynamically */
+table {
+    table-layout: auto; /* Default is auto, can be explicitly set */
+    width: 100%; /* Ensures table spans available space */
+}
+
+th, td {
+    white-space: nowrap; /* Prevents text wrapping */
+    text-overflow: ellipsis; /* Adds ellipsis for overflowed content if combined with max-width */
+    vertical-align: top; /* Aligns content to the top */
+}
+</style>
 {% endblock %}

app/legacy/views.py

     config_readonly_fields = []  # Fields that should be read-only in update view
 
     config_edit_fields = "__all__"  # "all" or a list of field names to display
+    ordering = None
 
 
 
             fields = [model_fields[f] for f in self.config_fields if f in model_fields]
         else:
             fields = list(model_fields.values())
-        pprint("------------------------")
-        pprint(f"fields = {fields}")
+        # pprint("------------------------")
+        # pprint(f"fields = {fields}")
 
         # Exclude fields specified in `config_excludes`
         fields = [f for f in fields if f.name not in self.config_excludes]
             template_name = self.list_template_name
             paginate_by = self.paginate_by
             filterset_class = self.filterset_class
+            ordering = self.ordering
 
             def get_context_data(inner_self, **kwargs):
                 context = super().get_context_data(**kwargs)
     config_fields = ["id", "lot_no", "code", "avg", "start_time", "end_time", "grade", "created_at"]  # Display these fields first
     config_field_orders = ["id", "lot_no", "code", "avg", "start_time", "end_time", "grade", "created_at"]  # Display these fields first
     config_readonly_fields = ["lot_no"]
-    config_edit_fields = ["lot_no", "code"]
+    # config_edit_fields = ["lot_no", "code"]
+    ordering = ["-created_at", "-id",]
     

app/templates/base.html

     {% endif %}
 
     <!-- Main Content -->
-    <div class="p-4 sm:ml-64">
-        <div class="mt-14">
-        {% if messages %}
+    <div class="flex flex-col min-h-screen">
+    <!-- Content Area -->
+       <div class="flex-grow p-4 sm:ml-64">
+          <div class="mt-14">
+          {% if messages %}
 
-            <div class="container mx-auto px-4 py-4">
-                {% for message in messages %}
-                <div id="message-alert" 
-                     class="p-4 mb-4 text-white rounded-lg bg-green-500 transition-opacity duration-500"
-                     style="opacity: 1;">
-                  {{ message }}
-                </div>
-                {% endfor %}
-            </div>
-        {% endif %}
+              <div class="container mx-auto px-4 py-4">
+                  {% for message in messages %}
+                  <div id="message-alert" 
+                       class="p-4 mb-4 text-white rounded-lg bg-green-500 transition-opacity duration-500"
+                       style="opacity: 1;">
+                    {{ message }}
+                  </div>
+                  {% endfor %}
+              </div>
+          {% endif %}
 
-          {% render_breadcrumbs bs %}
-          {% block content %}{% endblock %}
-        </div>
+            {% render_breadcrumbs bs %}
+            {% block content %}{% endblock %}
+          </div>
     </div>
 
     <!-- Footer -->