feat(DataTable): Update DataTable component to use Cinder for table generation

.formatter.exs

@@ -24,6 +24,8 @@ spark_locals_without_parens = [
   show_resources: 1,
   show_sensitive_fields: 1,
   table_columns: 1,
+  table_filterable_columns: 1,
+  table_sortable_columns: 1,
   type: 1,
   update_actions: 1
 ]
@@ -35,7 +37,7 @@ macro_locals_without_parens = [
 
 [
   inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs}"],
-  import_deps: [:phoenix],
+  import_deps: [:phoenix, :cinder],
   locals_without_parens: spark_locals_without_parens ++ macro_locals_without_parens,
   plugins: [Phoenix.LiveView.HTMLFormatter],
   export: [

assets/tailwind.config.js

@@ -6,7 +6,11 @@ const fs = require("fs");
 const path = require("path");
 
 module.exports = {
-  content: ["./js/**/*.js", "./../lib/ash_admin/components/**/*.*ex"],
+  content: [
+    "./js/**/*.js",
+    "./../lib/ash_admin/components/**/*.*ex",
+    "../deps/cinder/**/*.*ex",
+  ],
   theme: {
     extend: {
       colors: {
@@ -25,19 +29,19 @@ module.exports = {
       addVariant("phx-click-loading", [
         ".phx-click-loading&",
         ".phx-click-loading &",
-      ])
+      ]),
     ),
     plugin(({ addVariant }) =>
       addVariant("phx-submit-loading", [
         ".phx-submit-loading&",
         ".phx-submit-loading &",
-      ])
+      ]),
     ),
     plugin(({ addVariant }) =>
       addVariant("phx-change-loading", [
         ".phx-change-loading&",
         ".phx-change-loading &",
-      ])
+      ]),
     ),
 
     // Embeds Heroicons (https://heroicons.com) into your app.css bundle
@@ -77,7 +81,7 @@ module.exports = {
             };
           },
         },
-        { values }
+        { values },
       );
     }),
   ],

config/config.exs

@@ -45,6 +45,8 @@ config :tailwind,
 config :logger, level: :debug
 config :phoenix, :serve_endpoints, true
 
+config :cinder, default_theme: AshAdmin.Themes.AshAdminTheme
+
 if config_env() == :dev do
   config :ash_admin,
     ash_domains: [

dev/resources/accounts/resources/user.ex

@@ -20,6 +20,8 @@ defmodule Demo.Accounts.User do
     read_actions [:me, :read, :by_id, :by_name]
 
     table_columns [:id, :first_name, :last_name, :representative, :admin, :full_name, :api_key, :date_of_birth]
+    table_filterable_columns [:first_name]
+    table_sortable_columns [:first_name, :last_name]
 
     show_calculations [:multi_arguments, :is_super_admin?, :full_name, :nested_embed]
   end

documentation/dsls/DSL-AshAdmin.Resource.md

@@ -32,6 +32,8 @@ Configure the admin dashboard for a given resource.
 | [`polymorphic_tables`](#admin-polymorphic_tables){: #admin-polymorphic_tables } | `list(String.t)` |  | For resources that use ash_postgres' polymorphism capabilities, you can provide a list of tables that should be available to select. These will be added to the list of derivable tables based on scanning all domains and resources provided to ash_admin. |
 | [`polymorphic_actions`](#admin-polymorphic_actions){: #admin-polymorphic_actions } | `list(atom)` |  | For resources that use ash_postgres' polymorphism capabilities, you can provide a list of actions that should require a table to be set. If this is not set, then *all* actions will require tables. |
 | [`table_columns`](#admin-table_columns){: #admin-table_columns } | `list(atom)` |  | The list of attributes to render on the table view. |
+| [`table_sortable_columns`](#admin-table_sortable_columns){: #admin-table_sortable_columns } | `list(atom)` |  | The list of columns that can be sorted. If not specified, no columns are sortable. |
+| [`table_filterable_columns`](#admin-table_filterable_columns){: #admin-table_filterable_columns } | `list(atom)` |  | The list of columns that can be filtered. If not specified, no columns are filterable. |
 | [`format_fields`](#admin-format_fields){: #admin-format_fields } | `list(any)` |  | The list of fields and their formats represented as a MFA. For example: `updated_at: {Timex, :format!, ["{0D}-{0M}-{YYYY} {h12}:{m} {AM}"]}`. Datatable pages format all given fields. Show and Update pages format given read-only fields of types `Ash.Type.Date`, `Ash.Type.DateTime`, `Ash.Type.Time`, `Ash.Type.NaiveDatetime`, `Ash.Type.UtcDatetime` and `Ash.Type.UtcDatetimeUsec`. |
 | [`relationship_display_fields`](#admin-relationship_display_fields){: #admin-relationship_display_fields } | `list(atom)` |  | The list of attributes to render when this resource is shown as a relationship on another resource's datatable. |
 | [`resource_group`](#admin-resource_group){: #admin-resource_group } | `atom` |  | The group in the top resource dropdown that the resource appears in. |