feat: add ability to set cusom css classes to columns

Author: ivictbor

adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md

@@ -142,6 +142,24 @@ export default {
 
 >⚠️ Please note that sticky columns can only be applied to one column per resource.
 
+### Custom list column class
+
+You can add a custom CSS class to any list column with `listCssClass`. AdminForth applies it to both the header cell and the data cells for that column.
+
+```typescript title="./resources/apartments.ts"
+export default {
+  resourceId: 'aparts',
+  ...
+  columns: [
+    {
+      name: "price",
+      listCssClass: "text-right font-semibold min-w-10",
+    },
+    ...
+  ]
+}
+```
+
 ### Conditional display
 You can conditionally display columns in forms and views based on the values of other fields in the current record using the `showIf` property. This enables dynamic layouts that automatically adapt to user input, creating more intuitive and context-aware interfaces.
 

adminforth/spa/src/components/ResourceListTable.vue

@@ -31,7 +31,13 @@
             </Checkbox>
           </td>
 
-          <td v-for="c in columnsListed" ref="headerRefs" scope="col" class="list-table-header-cell px-2 md:px-3 lg:px-6 py-3" :class="{'sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading': c.listSticky}">
+          <td
+            v-for="c in columnsListed"
+            ref="headerRefs"
+            scope="col"
+            class="list-table-header-cell px-2 md:px-3 lg:px-6 py-3"
+            :class="[c.listCssClass, {'sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading': c.listSticky}]"
+          >
 
             <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
                 class="flex items-center font-semibold" :class="{'cursor-pointer':c.sortable}">
@@ -122,7 +128,11 @@
             </Checkbox>
           </td>
 
-          <td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4" :class="{'sticky-column bg-lightListTable dark:bg-darkListTable': c.listSticky}">
+          <td
+            v-for="c in columnsListed"
+            class="px-2 md:px-3 lg:px-6 py-4"
+            :class="[c.listCssClass, {'sticky-column bg-lightListTable dark:bg-darkListTable': c.listSticky}]"
+          >
             <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
             <component
               :is="c?.components?.list ? getCustomComponent(typeof c.components.list === 'string' ? { file: c.components.list } : c.components.list) : ValueRenderer"
@@ -835,4 +845,4 @@ tr.list-table-body-row:not(:first-child):hover {
   }
 }
 
-</style>
+</style>

adminforth/types/Common.ts

@@ -1004,6 +1004,11 @@ export interface AdminForthResourceColumnInputCommon {
    */
   listSticky?: boolean;
 
+  /**
+   * Custom CSS class applied to the column in list view header and cells.
+   */
+  listCssClass?: string;
+
   /**
    * Show field only if certain conditions are met.
    */

tests/application/resources/cars_sl_allow_create.ts

@@ -10,7 +10,11 @@ export default {
     listTableClickUrl: async (record: any, _adminUser: any, resource: any) => `/resource/${resource.resourceId}/show/${record.id}`,
   },
   columns: [
-    ...cars_sl.columns.filter(c => c.name !== "mileage" && c.name !== "photos" && c.name !== "generated_promo_picture"),
+    ...cars_sl.columns
+      .filter(c => c.name !== "mileage" && c.name !== "photos" && c.name !== "generated_promo_picture")
+      .map((column) => column.name === 'model'
+        ? { ...column, listCssClass: 'text-lightPrimary dark:text-darkPrimary' }
+        : column),
     {
       name: "mileage",
       type: "number",

tests/jest_tests/CRUD_sqlite.test.ts

@@ -922,6 +922,7 @@ describe('POST /get_resource_data', () => {
       expect(res.body.resource.table).toBeUndefined();
       expect(res.body.resource.dataSource).toBeUndefined();
       expect(res.body.resource.dataSourceColumns).toBeUndefined();
+      expect(res.body.resource.columns.find((column: any) => column.name === 'model').listCssClass).toBe('text-lightPrimary dark:text-darkPrimary');
     });
   });