katalyst-tables 2.6.0.beta → 3.0.0.beta1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 10815e05f743cbe5d5c21845bf15e94318b2f0302c5466f55dc8094a34330fc9
-  data.tar.gz: 0ded18dae608cee47f68ac143e55a63a58c7c36b5c2bfeb10add6ebd67771f32
+  metadata.gz: ac8dcee0526a034b23487868fb642c389e69c323aaf463a7aa6896bf777d5bc1
+  data.tar.gz: 8cea19cc8467137e533b9146daa65f51dacdf78763e4fde7904542261cbc66b3
 SHA512:
-  metadata.gz: 4dc10673cee47c520e1b15f564f5ea532510d54923b97e13c5e49559fe2c474cb962b8955102182b2874889127012d74794efa99a9494aec1fedc0532ddea02a
-  data.tar.gz: 2f65c7295d432fb3ada59eeb6d0c1dbc50aee134613ae922b583e738a5c7adc3fa83e1f3edc8833b96ae6642e6c88d0b492039cc0f30a72178997be211604d7f
+  metadata.gz: ea6efd6150d3bb2d9f9d48c89920831f97e6dede515cfcd99ec049f81328c32c373fbf49cfd798adde0f1d8055819e1eb4f40931f8ac392809006c384c219c98
+  data.tar.gz: 66480c79be3aa1762145c3d92723f284ed61749d46029600d20541820e2d831e266fa79ffa0de9ad77efc750ba80f274f7fee86267b7a946cad78ba8c49773da

data/CHANGELOG.md

@@ -1,4 +1,9 @@
-## [Unreleased]
+## [3.0.0.beta1]
+- Breaking change: remove Turbo Streams from table and pagination components, focus preservation is handled via Turbo Morph
+- Improve spec coverage
+- Update examples in [README](README.md) and [docs](/docs) to reflect changes
+
+## [2.6.0]
 
 - Added table row selection
   - See [[docs/selectable.md]] for examples

data/README.md

@@ -274,34 +274,12 @@ for a collection.
 <%= render Katalyst::Tables::PagyNavComponent.new(collection: @people) %>
 ```
 
-## Turbo streams
-
-This gem provides turbo stream entry points for table and pagy_nav. These are
-identical in the options they support, but they require ids, and they will
-automatically render turbo stream replace tags when rendered as part of a turbo
-stream response.
-
-To take full advantage of this feature, we suggest you build the component in
-your controller and pass it to the view. This allows you to use the same
-controller for both HTML and turbo responses.
-
-```ruby
-def index
-  collection = ApplicationCollection.new.with_params(params).apply(People.all)
-  table = Katalyst::Turbo::TableComponent.new(collection:, id: "people")
-  
-  respond_to do |format|
-    format.turbo_stream { render table } if self_referred?
-    format.html { render locals: { table: table } }
-  end
-end
-```
-
 ## Extensions
 
 The following extensions are available:
 
 * [Orderable](docs/orderable.md) - adds bulk-update for 'ordinal' columns via dragging rows in the table.
+* [Selectable](docs/selectable.md) - adds bulk-action support for rows in the table.
 
 ## Customization
 

data/app/assets/stylesheets/katalyst/tables/_index.scss

@@ -0,0 +1 @@
+@use "table";

data/app/assets/stylesheets/katalyst/tables/_ordinal.scss

@@ -0,0 +1,38 @@
+$width: 2rem !default;
+$time: 125ms !default;
+
+table {
+  tr {
+    transition:
+      top $time ease-in-out,
+      transform $time ease-in-out;
+  }
+
+  tr[dragging] {
+    transition: transform $time ease-in-out;
+    filter: drop-shadow(0 0 0.5rem var(--row-border-color));
+    transform: scale(1.01);
+    td {
+      box-shadow: none;
+    }
+  }
+
+  th.ordinal {
+    width: $width;
+    padding-left: 0;
+    a {
+      width: $width;
+      height: 3rem;
+    }
+    a::after {
+      right: 0;
+    }
+  }
+
+  td.ordinal {
+    width: $width;
+    padding-left: 0;
+    cursor: grab;
+    text-align: center;
+  }
+}

data/app/assets/stylesheets/katalyst/tables/_table.scss

@@ -0,0 +1,123 @@
+@use "ordinal" as *;
+@use "typed-columns";
+
+$grey: #f0ecf3 !default;
+
+$table-header-color: transparent !default;
+$row-border-color: $grey !default;
+$row-height: 48px !default;
+$cell-spacing: 0.5rem !default;
+
+$width-small: 6rem !default;
+$width-medium: 12rem !default;
+$width-large: 16rem !default;
+
+table {
+  --row-height: #{$row-height};
+  --cell-spacing: #{$cell-spacing};
+  --table-header-color: #{$table-header-color};
+  --row-border-color: #{$row-border-color};
+
+  --width-small: #{$width-small};
+  --width-medium: #{$width-medium};
+  --width-large: #{$width-large};
+}
+
+table {
+  border: none;
+  table-layout: fixed;
+  border-collapse: collapse;
+  text-align: left;
+  width: 100%;
+
+  thead {
+    background: var(--table-header-color);
+  }
+
+  tr {
+    height: var(--row-height);
+    line-height: var(--row-height);
+  }
+
+  th,
+  td {
+    border: none;
+    box-shadow: inset 0px -1px 0px var(--row-border-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+    white-space: nowrap;
+    background-color: white;
+    padding-right: var(--cell-spacing);
+
+    &:last-child {
+      padding-right: 0;
+    }
+
+    > a {
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      text-decoration: none;
+    }
+
+    > img,
+    > a > img {
+      max-height: 3rem;
+      padding: 0;
+    }
+
+    > .trix-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  th {
+    font-weight: bold;
+
+    :where(&.width-s) {
+      width: var(--width-small);
+    }
+
+    :where(&.width-m) {
+      width: var(--width-medium);
+    }
+
+    :where(&.width-l) {
+      width: var(--width-large);
+    }
+  }
+
+  thead a.ascending:after,
+  [data-sort="asc"] a::after {
+    display: inline-block;
+    content: " ";
+    position: relative;
+    margin-left: 1rem;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Cpath d='M.541 0l11.125 12.573a.5.5 0 00.749 0L23.541 0h-23z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
+    background-size: 14px 14px;
+    height: 14px;
+    width: 14px;
+    top: 0;
+    transform: rotate(180deg);
+  }
+
+  thead a.descending:after,
+  [data-sort="desc"] a::after {
+    display: inline-block;
+    content: " ";
+    position: relative;
+    margin-left: 1rem;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Cpath d='M.541 0l11.125 12.573a.5.5 0 00.749 0L23.541 0h-23z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
+    background-size: 14px 14px;
+    height: 14px;
+    width: 14px;
+    top: 4px;
+  }
+
+  caption {
+    margin: 2rem 0;
+  }
+}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_boolean.scss

@@ -0,0 +1,4 @@
+// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
+:where(th.type-boolean) {
+  width: var(--width-small);
+}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_currency.scss

@@ -0,0 +1,5 @@
+// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
+:where(th.type-currency, td.type-currency) {
+  width: var(--width-small);
+  text-align: right;
+}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_date.scss

@@ -0,0 +1,4 @@
+// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
+:where(th.type-date) {
+  width: var(--width-medium);
+}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_datetime.scss

@@ -0,0 +1,4 @@
+// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
+:where(th.type-datetime) {
+  width: var(--width-medium);
+}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_index.scss

@@ -0,0 +1,5 @@
+@use "boolean";
+@use "currency";
+@use "date";
+@use "datetime";
+@use "number";

data/app/assets/stylesheets/katalyst/tables/typed-columns/_number.scss

@@ -0,0 +1,5 @@
+// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
+:where(th.type-number, td.type-number) {
+  width: var(--width-small);
+  text-align: right;
+}

data/app/components/concerns/katalyst/tables/body/typed_columns.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Tables
+    module Body
+      module TypedColumns
+        extend ActiveSupport::Concern
+
+        # Generates a column from boolean values rendered as "Yes" or "No".
+        #
+        # @param method [Symbol] the method to call on the record
+        # @param attributes [Hash] HTML attributes to be added to the cell
+        # @param block [Proc] optional block to alter the cell content
+        # @return [void]
+        #
+        # @example Render a boolean column indicating whether the record is active
+        #   <% row.boolean :active %> # => <td>Yes</td>
+        def boolean(method, **attributes, &)
+          with_column(Body::BooleanComponent.new(@table, @record, method, **attributes), &)
+        end
+
+        # Generates a column from date values rendered using I18n.l.
+        # The default format is :admin, but it can be overridden.
+        #
+        # @param method [Symbol] the method to call on the record
+        # @param format [Symbol] the I18n date format to use when rendering
+        # @param attributes [Hash] HTML attributes to be added to the cell tag
+        # @param block [Proc] optional block to alter the cell content
+        # @return [void]
+        #
+        # @example Render a date column describing when the record was created
+        #   <% row.date :created_at %> # => <td>29 Feb 2024</td>
+        def date(method, format: :table, **attributes, &)
+          with_column(Body::DateComponent.new(@table, @record, method, format:, **attributes), &)
+        end
+
+        # Generates a column from datetime values rendered using I18n.l.
+        # The default format is :admin, but it can be overridden.
+        #
+        # @param method [Symbol] the method to call on the record
+        # @param format [Symbol] the I18n datetime format to use when rendering
+        # @param attributes [Hash] HTML attributes to be added to the cell tag
+        # @param block [Proc] optional block to alter the cell content
+        # @return [void]
+        #
+        # @example Render a datetime column describing when the record was created
+        #   <% row.datetime :created_at %> # => <td>29 Feb 2024, 5:00pm</td>
+        def datetime(method, format: :table, **attributes, &)
+          with_column(Body::DateTimeComponent.new(@table, @record, method, format:, **attributes), &)
+        end
+
+        # Generates a column from numeric values formatted appropriately.
+        #
+        # @param method [Symbol] the method to call on the record
+        # @param attributes [Hash] HTML attributes to be added to the cell tag
+        # @param block [Proc] optional block to alter the cell content
+        # @return [void]
+        #
+        # @example Render the number of comments on a post
+        #   <% row.number :comment_count %> # => <td>0</td>
+        def number(method, **attributes, &)
+          with_column(Body::NumberComponent.new(@table, @record, method, **attributes), &)
+        end
+
+        # Generates a column from numeric values rendered using `number_to_currency`.
+        #
+        # @param method [Symbol] the method to call on the record
+        # @param options [Hash] options to be passed to `number_to_currency`
+        # @param attributes [Hash] HTML attributes to be added to the cell tag
+        # @param block [Proc] optional block to alter the cell content
+        # @return [void]
+        #
+        # @example Render a currency column for the price of a product
+        #   <% row.currency :price %> # => <td>$3.50</td>
+        def currency(method, options: {}, **attributes, &)
+          with_column(Body::CurrencyComponent.new(@table, @record, method, options:, **attributes), &)
+        end
+
+        # Generates a column containing HTML markup.
+        #
+        # @param method [Symbol] the method to call on the record
+        # @param attributes [Hash] HTML attributes to be added to the cell tag
+        # @param block [Proc] optional block to alter the cell content
+        # @return [void]
+        #
+        # @note This method assumes that the method returns HTML-safe content.
+        #   If the content is not HTML-safe, it will be escaped.
+        #
+        # @example Render a description column containing HTML markup
+        #   <% row.rich_text :description %> # => <td><em>Emphasis</em></td>
+        def rich_text(method, **attributes, &)
+          with_column(Body::RichTextComponent.new(@table, @record, method, **attributes), &)
+        end
+
+        # Generates a column that links to the record's show page (by default).
+        #
+        # @param method [Symbol] the method to call on the record
+        # @param link [Hash] options to be passed to the link_to helper
+        # @option opts [Hash, Array, String, Symbol] :url ([:admin, object]) options for url_for,
+        # or a symbol to be passed to the route helper
+        # @param attributes [Hash] HTML attributes to be added to the cell tag
+        # @param block [Proc] optional block to alter the cell content
+        # @return [void]
+        #
+        # @example Render a column containing the record's title, linked to its show page
+        #   <% row.link :title %> # => <td><a href="/admin/post/15">About us</a></td>
+        # @example Render a column containing the record's title, linked to its edit page
+        #   <% row.link :title, url: :edit_admin_post_path do |cell| %>
+        #      Edit <%= cell %>
+        #   <% end %>
+        #   # => <td><a href="/admin/post/15/edit">Edit About us</a></td>
+        def link(method, url: @record, link: {}, **attributes, &)
+          with_column(Body::LinkComponent.new(@table, @record, method, url:, link:, **attributes), &)
+        end
+
+        # Generates a column that renders an ActiveStorage attachment as a downloadable link.
+        #
+        # @param method [Symbol] the method to call on the record
+        # @param variant [Symbol] the variant to use when rendering the image (default :thumb)
+        # @param attributes [Hash] HTML attributes to be added to the cell tag
+        # @param block [Proc] optional block to alter the cell content
+        # @return [void]
+        #
+        # @example Render a column containing a download link to the record's background image
+        #   <% row.attachment :background %> # => <td><a href="...">background.png</a></td>
+        def attachment(method, variant: :thumb, **attributes, &)
+          with_column(Body::AttachmentComponent.new(@table, @record, method, variant:, **attributes), &)
+        end
+      end
+    end
+  end
+end

data/app/components/concerns/katalyst/tables/has_table_content.rb

@@ -33,7 +33,7 @@ module Katalyst
 
       def row_renderer
         @row_renderer ||= RowRenderer.new(@lookup_context,
-                                          collection: collection,
+                                          collection:,
                                           as:         @as,
                                           partial:    @partial,
                                           variants:   [:row],

data/app/components/concerns/katalyst/tables/header/typed_columns.rb

@@ -0,0 +1,179 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Tables
+    module Header
+      module TypedColumns
+        extend ActiveSupport::Concern
+
+        # Renders a boolean column header
+        # @param method [Symbol] the method to call on the record to get the value
+        # @param attributes [Hash] additional arguments are applied as html attributes to the th element
+        # @option attributes [String] :label (nil) The label options to display in the header
+        # @option attributes [Hash] :link ({}) The link options for the sorting link
+        # @option attributes [String] :width (nil) The width of the column, can be +:xs+, +:s+, +:m+, +:l+ or nil
+        #
+        # @example Render a boolean column header
+        #  <% row.boolean :active %> # => <th>Active</th>
+        #
+        # @example Render a boolean column header with a custom label
+        #  <% row.boolean :active, label: "Published" %> # => <th>Published</th>
+        #
+        # @example Render a boolean column header with small width
+        #  <% row.boolean :active, width: :s %>
+        #  => <th class="width-s">Active</th>
+        #
+        def boolean(method, **attributes, &)
+          with_column(Header::BooleanComponent.new(@table, method, link: @link_attributes, **attributes), &)
+        end
+
+        # Renders a date column header
+        # @param method [Symbol] the method to call on the record to get the value
+        # @param attributes [Hash] additional arguments are applied as html attributes to the th element
+        # @option attributes [String] :label (nil) The label options to display in the header
+        # @option attributes [Hash] :link ({}) The link options for the sorting link
+        # @option attributes [String] :width (nil) The width of the column, can be +:xs+, +:s+, +:m+, +:l+ or nil
+        #
+        # @example Render a date column header
+        #  <% row.date :published_on %> # => <th>Published on</th>
+        #
+        # @example Render a date column header with a custom label
+        #  <% row.date :published_on, label: "Date" %> # => <th>Date</th>
+        #
+        # @example Render a boolean column header with small width
+        #  <% row.date :published_on, width: :s %>
+        #  => <th class="width-s">Published on</th>
+        #
+        def date(method, **attributes, &)
+          with_column(Header::DateComponent.new(@table, method, link: @link_attributes, **attributes), &)
+        end
+
+        # Renders a datetime column header
+        # @param method [Symbol] the method to call on the record to get the value
+        # @param attributes [Hash] additional arguments are applied as html attributes to the th element
+        # @option attributes [String] :label (nil) The label options to display in the header
+        # @option attributes [Hash] :link ({}) The link options for the sorting link
+        # @option attributes [String] :width (nil) The width of the column, can be +:xs+, +:s+, +:m+, +:l+ or nil
+        #
+        # @example Render a datetime column header
+        #  <% row.datetime :created_at %> # => <th>Created at</th>
+        #
+        # @example Render a datetime column header with a custom label
+        #  <% row.datetime :created_at, label: "Published at" %> # => <th>Published at</th>
+        #
+        # @example Render a boolean column header with small width
+        #  <% row.datetime :created_at, width: :s %>
+        #  => <th class="width-s">Created at</th>
+        #
+        def datetime(method, **attributes, &)
+          with_column(Header::DateTimeComponent.new(@table, method, link: @link_attributes, **attributes), &)
+        end
+
+        # Renders a number column header
+        # @param method [Symbol] the method to call on the record to get the value
+        # @param attributes [Hash] additional arguments are applied as html attributes to the th element
+        # @option attributes [String] :label (nil) The label options to display in the header
+        # @option attributes [Hash] :link ({}) The link options for the sorting link
+        # @option attributes [String] :width (nil) The width of the column, can be +:xs+, +:s+, +:m+, +:l+ or nil
+        #
+        # @example Render a number column header
+        #  <% row.number :comment_count %> # => <th>Comments</th>
+        #
+        # @example Render a number column header with a custom label
+        #  <% row.number :comment_count, label: "Comments" %> # => <th>Comments</th>
+        #
+        # @example Render a boolean column header with small width
+        #  <% row.number :comment_count, width: :s %>
+        #  => <th class="width-s">Comments</th>
+        #
+        def number(method, **attributes, &)
+          with_column(Header::NumberComponent.new(@table, method, link: @link_attributes, **attributes), &)
+        end
+
+        # Renders a currency column header
+        # @param method [Symbol] the method to call on the record to get the value
+        # @param attributes [Hash] additional arguments are applied as html attributes to the th element
+        # @option attributes [String] :label (nil) The label options to display in the header
+        # @option attributes [Hash] :link ({}) The link options for the sorting link
+        # @option attributes [String] :width (nil) The width of the column, can be +:xs+, +:s+, +:m+, +:l+ or nil
+        #
+        # @example Render a currency column header
+        #  <% row.currency :price %> # => <th>Price</th>
+        #
+        # @example Render a currency column header with a custom label
+        #  <% row.currency :price, label: "Amount($)" %> # => <th>Amount($)</th>
+        #
+        # @example Render a boolean column header with small width
+        #  <% row.currency :price, width: :s %>
+        #  => <th class="width-s">Price</th>
+        #
+        def currency(method, **attributes, &)
+          with_column(Header::CurrencyComponent.new(@table, method, link: @link_attributes, **attributes), &)
+        end
+
+        # Renders a rich text column header
+        # @param method [Symbol] the method to call on the record to get the value
+        # @param attributes [Hash] additional arguments are applied as html attributes to the th element
+        # @option attributes [String] :label (nil) The label options to display in the header
+        # @option attributes [Hash] :link ({}) The link options for the sorting link
+        # @option attributes [String] :width (nil) The width of the column, can be +:xs+, +:s+, +:m+, +:l+ or nil
+        #
+        # @example Render a rich text header
+        #  <% row.rich_text :content %> # => <th>Content</th>
+        #
+        # @example Render a rich text column header with a custom label
+        #  <% row.currency :content, label: "Content!" %> # => <th>Content!</th>
+        #
+        # @example Render a boolean column header with small width
+        #  <% row.currency :content, width: :s %>
+        #  => <th class="width-s">Content</th>
+        #
+        def rich_text(method, **attributes, &)
+          with_column(Header::RichTextComponent.new(@table, method, link: @link_attributes, **attributes), &)
+        end
+
+        # Renders a link column header
+        # @param method [Symbol] the method to call on the record to get the value
+        # @param attributes [Hash] additional arguments are applied as html attributes to the th element
+        # @option attributes [String] :label (nil) The label options to display in the header
+        # @option attributes [Hash] :link ({}) The link options for the sorting link
+        # @option attributes [String] :width (nil) The width of the column, can be +:xs+, +:s+, +:m+, +:l+ or nil
+        #
+        # @example Render a link column header
+        #  <% row.link :link %> # => <th>Link</th>
+        #
+        # @example Render a link column header with a custom label
+        #  <% row.link :link, label: "Post" %> # => <th>Post</th>
+        #
+        # @example Render a boolean column header with small width
+        #  <% row.link :link, width: :s %>
+        #  => <th class="width-s">Link</th>
+        #
+        def link(method, **attributes, &)
+          with_column(Header::LinkComponent.new(@table, method, link: @link_attributes, **attributes), &)
+        end
+
+        # Renders a attachment column header
+        # @param method [Symbol] the method to call on the record to get the value
+        # @param attributes [Hash] additional arguments are applied as html attributes to the th element
+        # @option attributes [String] :label (nil) The label options to display in the header
+        # @option attributes [Hash] :link ({}) The link options for the sorting link
+        # @option attributes [String] :width (nil) The width of the column, can be +:xs+, +:s+, +:m+, +:l+ or nil
+        #
+        # @example Render a attachment column header
+        #  <% row.attachment :attachment %> # => <th>Attachment</th>
+        #
+        # @example Render a attachment column header with a custom label
+        #  <% row.attachment :attachment, label: "Document" %> # => <th>Document</th>
+        #
+        # @example Render a boolean column header with small width
+        #  <% row.attachment :attachment, width: :s %>
+        #  => <th class="width-s">Attachment</th>
+        #
+        def attachment(method, **attributes, &)
+          with_column(Header::AttachmentComponent.new(@table, method, link: @link_attributes, **attributes), &)
+        end
+      end
+    end
+  end
+end

data/app/components/concerns/katalyst/tables/orderable.rb

@@ -119,7 +119,7 @@ module Katalyst
         end
 
         def call
-          form_with(id: id, url: url, method: :patch, data: { controller: FORM_CONTROLLER }) do |form|
+          form_with(id:, url:, method: :patch, data: { controller: FORM_CONTROLLER }) do |form|
             form.button(hidden: "")
           end
         end

data/app/components/concerns/katalyst/tables/selectable.rb

@@ -73,7 +73,7 @@ module Katalyst
         def selection
           id     = @record.public_send(@table.selection.primary_key)
           params = {
-            id: id,
+            id:,
           }
           cell(:_selection,
                class: "selection",
@@ -82,6 +82,7 @@ module Katalyst
                  "#{ITEM_CONTROLLER}-params-value"              => params.to_json,
                  "#{ITEM_CONTROLLER}-#{FORM_CONTROLLER}-outlet" => "##{@table.selection.id}",
                  action:                                        "change->#{ITEM_CONTROLLER}#change",
+                 turbo_permanent:                               "",
                }) do
             tag.input(type: :checkbox)
           end

data/app/components/katalyst/table_component.rb

@@ -29,6 +29,7 @@ module Katalyst
     # - `sorting`: the sorting to apply to the collection (defaults to collection.storing if available)
     # - `header`: whether to render the header row (defaults to true, supports options)
     # - `caption`: whether to render the caption (defaults to true, supports options)
+    # - `generate_ids`: whether to generate ids for each row (defaults to true)
     # - `object_name`: the name of the object to use for partial rendering (defaults to collection.model_name.i18n_key)
     # - `partial`: the name of the partial to use for rendering each row (defaults to to_partial_path on the object)
     # - `as`: the name of the local variable to use for rendering each row (defaults to collection.model_name.param_key)
@@ -36,7 +37,8 @@ module Katalyst
     def initialize(collection:,
                    sorting: nil,
                    header: true,
-                   caption: false,
+                   caption: true,
+                   generate_ids: true,
                    **html_attributes)
       @collection = collection
 
@@ -52,9 +54,15 @@ module Katalyst
       @caption         = caption
       @caption_options = (caption if caption.is_a?(Hash)) || {}
 
+      @generate_ids = generate_ids
+
       super(**html_attributes)
     end
 
+    def id
+      html_attributes[:id]
+    end
+
     def caption?
       @caption.present?
     end
@@ -81,6 +89,10 @@ module Katalyst
       collection.sorting if collection.respond_to?(:sorting)
     end
 
+    def generate_ids?
+      @generate_ids.present?
+    end
+
     def inspect
       "#<#{self.class.name} collection: #{collection.inspect}>"
     end