stimulus_rails_datatables 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1fa5d82604ec3cbe676411866a0fb8f679f8428082064c17ee8fdb31bd2381eb
-  data.tar.gz: 3af0d8d46c2a8a64ffd0584b6bd96a5b2227473b592a2acfe1b1d12b57d56bb9
+  metadata.gz: 0a6c48a66c1fdfb21381c809b19c6a920f370a0c5840de680a698aa613e6ec82
+  data.tar.gz: 9020cb07384fcbd8edb98d6070ec6732cc14a2160ba6468ba13d9292799882e0
 SHA512:
-  metadata.gz: f2f88681c77f4d031577426fcc757c8f6955ae940cd22e9dbad49c8470bcc6e7ff08119857f2756b275431d5f482318b8b48244a31e1f3e24eacfe45aef55786
-  data.tar.gz: f88309876186c9209b36673ac36b40553ebf4e090ed63e20b740d958e6667ebefb8182f0966a756e9d149f1088a2dc3e6cf1e14d2e5e919f79b39c3889ff26fa
+  metadata.gz: 7963d1211951e6bd536001f24cbee70710b073efaf00ccbd1c151769ab8534e4aa6d66503d34cc2630ef30197bef31609abb4442904c81e320b72e684d0c3e4e
+  data.tar.gz: 115e262ea157c6ac4dc3b1756dc146d17d7c82d5b9e6801074cebed0d542833178938d45c0c605f7f9653f6b7a53118511575623092d387d2f1c91fb5ec28df3

data/README.md

@@ -23,6 +23,29 @@ And then execute:
 
 ```bash
 $ bundle install
+$ rails generate stimulus_rails_datatables:install
+```
+
+This will create:
+- `config/initializers/stimulus_rails_datatables.rb`
+- `app/javascript/datatables_config.js`
+
+### Setup JavaScript Controllers
+
+In `app/javascript/controllers/index.js`:
+
+```javascript
+import DatatableController from 'stimulus_rails_datatables/datatables_controller'
+import FilterController from 'stimulus_rails_datatables/filter_controller'
+
+application.register('datatable', DatatableController)
+application.register('filter', FilterController)
+```
+
+In `app/javascript/application.js`:
+
+```javascript
+import 'datatables_config'
 ```
 
 ## Usage
@@ -55,7 +78,8 @@ $ bundle install
       url: roles_path,
       label: 'name',
       value: 'id',
-      placeholder: 'Select Role'
+      placeholder: 'Select Role',
+      set_value: 1 # If set_value matches, it will be mark as selected
     }
   ) %>
 
@@ -109,6 +133,9 @@ end
 ### JavaScript API
 
 ```javascript
+// Access via window.AppDataTable or import directly
+import { AppDataTable } from 'stimulus_rails_datatables/app_datatable'
+
 // Reload a specific datatable
 AppDataTable.reload('#users-table')
 
@@ -119,35 +146,68 @@ AppDataTable.load('#users-table', '/users?status=active')
 AppDataTable.reloadAll()
 ```
 
-## Configuration
-
-The gem automatically registers Stimulus controllers and imports required JavaScript dependencies. The following controllers are available:
-
-- `datatable` - Main DataTable controller
-- `filter` - Filter controller with state management
+## Controller Setup
 
-## Overriding Default Configuration
-To override the default DataTables configuration, create a file at `app/javascript/datatables_config.js` with your custom settings or run rails generator:
+In your Rails controller, respond to JSON format for DataTables:
 
-```bash
-rails generate stimulus_rails_datatables:install
+```ruby
+class UsersController < ApplicationController
+  def index
+    respond_to do |format|
+      format.html
+      format.json { render json: UsersDatatable.new(view_context) }
+    end
+  end
+end
 ```
 
-Once created, you can pin it in your importmap configuration:
+## Configuration
 
-```ruby
-# config/importmap.rb
-pin 'datatables_config', to: 'datatables_config.js'
-```
+### Customizing DataTables Settings
 
-Finally, import it in your application JavaScript:
+Edit `app/javascript/datatables_config.js` to customize the DataTables appearance and behavior:
 
 ```javascript
-// app/javascript/application.js
-import 'datatables_config'
+window.datatablesConfig = {
+  // Language strings for DataTables UI
+  language: {
+    processing: '<div class="spinner-border"></div><div class="mt-2">Loading...</div>',
+    lengthMenu: '_MENU_',
+    search: `<div class="input-group">
+              <span class="input-group-text"><i class="material-symbols-outlined">search</i></span>
+              _INPUT_
+              <span class="input-group-text">
+                <kbd>ctrl + k</kbd>
+              </span>
+            </div>`,
+    info: 'Showing _START_ to _END_ of _TOTAL_ entries',
+    paginate: {
+      first: 'First',
+      last: 'Last',
+      next: 'Next',
+      previous: 'Previous'
+    }
+  },
+
+  // Layout configuration
+  layout: {
+    topStart: 'pageLength',
+    topEnd: 'search',
+    bottomStart: 'info',
+    bottomEnd: 'paging'
+  },
+
+  // Length menu options
+  lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]]
+}
 ```
 
-Note: You may need to restart your Rails server for changes to take effect.
+### Available Stimulus Controllers
+
+The gem automatically registers the following Stimulus controllers:
+
+- `datatable` - Main DataTable controller with server-side processing
+- `filter` - Filter controller with state management and localStorage persistence
 
 ## Dependencies
 

data/app/assets/javascripts/stimulus_rails_datatables/datatables_controller.js

@@ -83,9 +83,18 @@ export default class extends Controller {
     if (datatableWrapper === null) {
       Turbo.cache.exemptPageFromCache()
 
+      // Get config - prioritize window.datatablesConfig, fallback to defaults
+      const defaultConfig = getDatatablesConfig()
+      const userConfig = window.datatablesConfig || {}
+      const config = {
+        language: { ...defaultConfig.language, ...(userConfig.language || {}) },
+        layout: { ...defaultConfig.layout, ...(userConfig.layout || {}) },
+        lengthMenu: userConfig.lengthMenu || defaultConfig.lengthMenu
+      }
+
       const responsiveValue = this.responsiveValue
       const options = {
-        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
+        lengthMenu: config.lengthMenu,
         searching: this.searchingValue,
         lengthChange: this.lengthChangeValue,
         processing: this.processingValue,
@@ -96,16 +105,8 @@ export default class extends Controller {
         order: this.orderValue,
         columns: this.columnsValue,
         responsive: this.responsiveValue,
-        language: {
-          processing: '<div class="spinner-border"></div><div class="mt-2">Loading...</div>',
-          lengthMenu: 'show <span class="px-2">_MENU_</span> entries'
-        },
-        layout: {
-          topStart: 'pageLength',
-          topEnd: 'search',
-          bottomStart: 'info',
-          bottomEnd: 'paging'
-        },
+        language: config.language,
+        layout: config.layout,
         initComplete: function() {
           if (responsiveValue === false) {
             // Add overflow-x only to the table wrapper (not the whole layout) this is alternative of scrollX

data/app/assets/javascripts/stimulus_rails_datatables/filter_controller.js

@@ -82,6 +82,7 @@ export default class extends Controller {
     const labelKey = select.dataset.filterLabelKey
     const valueKey = select.dataset.filterValueKey
     const placeholder = select.dataset.filterPlaceholder || 'Select'
+    const set_value = select.dataset.filterSetValue || ''
 
     url = decodeURIComponent(url).replace(/{(\w+)}/g, (_, key) => {
       const input = this.element.querySelector(`[data-filter-field-name='${key}']`)
@@ -100,6 +101,12 @@ export default class extends Controller {
         const option = document.createElement('option')
         option.value = item[valueKey]
         option.textContent = item[labelKey]
+
+        // If set_value matches, mark as selected
+        if (set_value && item[valueKey] == set_value) {
+          option.selected = true
+        }
+
         select.appendChild(option)
       })
 

data/app/helpers/stimulus_rails_datatables/filter_helper.rb

@@ -46,7 +46,8 @@ module StimulusRailsDatatables
             filter_label_key: remote[:label],
             filter_value_key: remote[:value],
             filter_depends_on: depends_on&.to_s,
-            filter_placeholder: remote[:placeholder] || 'Select an option'
+            filter_placeholder: remote[:placeholder] || 'Select an option',
+            filter_set_value: remote[:set_value]
           }
 
           select_options = {

data/lib/generators/stimulus_rails_datatables/install/install_generator.rb

@@ -36,9 +36,13 @@ module StimulusRailsDatatables
         say "   application.register('filter', FilterController)"
         say "   window.AppDataTable = AppDataTable"
         say ''
-        say '3. Customize app/javascript/datatables_config.js to override default settings'
-        say '4. Create your datatable classes inheriting from StimulusRailsDatatables::BaseDatatable'
-        say '5. Use the datatable_for and filter_for helpers in your views'
+        say '3. Import app/javascript/datatables_config.js in your application.js:'
+        say ''
+        say "   import './datatables_config'"
+        say ''
+        say '4. Customize app/javascript/datatables_config.js to override default settings'
+        say '5. Create your datatable classes inheriting from StimulusRailsDatatables::BaseDatatable'
+        say '6. Use the datatable_for and filter_for helpers in your views'
         say ''
         say 'To override the default configuration, edit app/javascript/datatables_config.js and the ff:'
         say '1. pin it in config/importmap.rb if using importmap:'

data/lib/generators/stimulus_rails_datatables/install/templates/datatables_config.js

@@ -1,10 +1,8 @@
-// Import the functions to set and get the config
-import { setDatatablesConfig } from 'stimulus_rails_datatables/config'
-
 // DataTables Configuration Override
-// Customize these settings to match your application's needs
-// This file overrides the default gem configuration
-export const datatablesConfig = {
+// Set window.datatablesConfig to customize DataTables settings
+// This will override the gem's default configuration
+
+window.datatablesConfig = {
   // Language strings for DataTables UI
   language: {
     processing: '<div class="spinner-border"></div><div class="mt-2">Loading...</div>',
@@ -45,6 +43,3 @@ export const datatablesConfig = {
   // Length menu options
   lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]]
 }
-
-// Apply the custom configuration
-setDatatablesConfig(datatablesConfig)

data/lib/stimulus_rails_datatables/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module StimulusRailsDatatables
-  VERSION = '0.2.2'
+  VERSION = '0.3.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stimulus_rails_datatables
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.3.0
 platform: ruby
 authors:
 - Den Meralpis