LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="table_5793709857">
  <div class="lui-table lui-table--tree-mode" id="table_5793709857" data-controller="table" data-table-data-source-id-value="_data_source" data-table-float-bar-outlet="#table_5793709857 .lui-table__floating_bar .lui-float_bar">
    <div data-react-class="Table" data-react-props="{"uniqueId":"table_5793709857","id":"","lang":"en","columns":[{"title":"Name","dataIndex":"name","type":"html","className":"lui-table__cell lui-table__cell--n0 lui-table__cell--first","hidable":true},{"title":"Features","dataIndex":"features","type":"html","className":"lui-table__cell lui-table__cell--n1","hidable":true},{"title":"Created At","dataIndex":"created_at","type":"html","className":"lui-table__cell lui-table__cell--n2 lui-table__cell--last","hidable":true}],"dataSource":[{"name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_6597424226\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \u003cdiv class=\"whitespace-nowrap w-[200px]\"\u003eCategory 1\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","children":[{"name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_9912568611\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \u003cdiv class=\"whitespace-nowrap w-[200px]\"\u003e              Category 1.1\n\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":"Category 1.1_0}","_lui_data":{"delete_action":null}},{"name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_2322156580\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \u003cdiv class=\"whitespace-nowrap w-[200px]\"\u003e              Category 1.2\n\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":"Category 1.2_1}","_lui_data":{"delete_action":null}}],"_lui_key":"Category 1_0}","_lui_data":{"delete_action":null}},{"name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_5215854990\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \u003cdiv class=\"whitespace-nowrap w-[200px]\"\u003eCategory 2\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","children":[{"name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_8670528836\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \u003cdiv class=\"whitespace-nowrap w-[200px]\"\u003e              Category 2.1\n\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":"Category 2.1_0}","_lui_data":{"delete_action":null}},{"name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_9451751915\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \u003cdiv class=\"whitespace-nowrap w-[200px]\"\u003e              Category 2.2\n\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":"Category 2.2_1}","_lui_data":{"delete_action":null}}],"_lui_key":"Category 2_1}","_lui_data":{"delete_action":null}}],"pagination":{"current":1,"pageSize":15,"total":0},"searchQuery":null,"globalFiltersHtml":null,"tableHeader":"\u003cdiv class=\"lui-table_header\" data-controller=\"table-filters\"\u003e\n        \u003cdiv class=\"w-80\"\u003e\n            \u003cdiv data-controller=\"search\"\n  id=\"looposui-inputs-search_table__search_input_1569762617\"\n  class=\"lui-search\"\n  data-search-input-outlet=\"#looposui-inputs-search_table__search_input_1569762617 .lui-inner-input\"\n  data-search-event-only-value=\"true\"\n  \u003e\n  \n  \u003cdiv data-controller=\"input\" data-input-open-actions-value=\"false\" class=\"lui-inner-input relative flex gap-2\"\n   data-input-original-input-value=\"\"\n    data-input-mode-value=\"autosubmit\"\n    data-input-form-value=\"\"\u003e\n    \u003cdiv class=\"w-full flex flex-col\"\u003e\n        \u003cspan class=\"lui-input \"\u003e\n            \u003cspan class=\"lui-input__addon-left\"\u003e\n                    \u003cdiv class=\"text-[12px] flex items-center text-center\"\u003e\n        \u003ci class=\"fa-regular fa-magnifying-glass text-gray-400\"\u003e\u003c/i\u003e\n      \u003c/div\u003e\n\n            \u003c/span\u003e\n          \u003cinput name=\"table__search_input\" type=\"search\" placeholder=\"Search by...\" class=\"lui-input__input\" mode=\"autosubmit\" contentEditable=\"true\" data-input-target=\"input\" data-action=\"input-\u0026gt;search#toggleClearButton input-\u0026gt;input#setEditing input-\u0026gt;search#onInput change-\u0026gt;search#onInput\" data-search-target=\"input\"\u003e\n            \u003cspan class=\"lui-input__addon-right\"\u003e\n                    \u003cspan class=\"flex\"\u003e\n        \u003ci class=\"fa-regular fa-xmark cursor-pointer text-gray-400\"\n          data-search-target=\"clearButton\"\n          data-action=\"click-\u003esearch#clear click-\u003einput#finishEditing\"\u003e\n        \u003c/i\u003e\n      \u003c/span\u003e\n\n            \u003c/span\u003e\n          \u003cspan class=\"lui-input__spinner\"\u003e\n            \u003ci class=\"fa-regular fa-spinner\"\u003e\u003c/i\u003e\n          \u003c/span\u003e\n\u003c/span\u003e      \n      \n    \u003c/div\u003e\n    \u003cspan class=\"lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit\" data-input-target=\"actions\"\u003e\n      \u003cbutton class=\"lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit\" data-controller=\"lui--button\" data-input-target=\"cancel\" data-action=\"click-\u0026gt;input#handleClose\" type=\"button\" disabled=\"disabled\"\u003e\n  \n    \u003ci class=\"lui-button__icon lui-button__icon--tiny fa-regular fa-xmark\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\n    \n    \n\u003c/button\u003e\n\n        \u003cbutton class=\"lui-button lui-button--success--secondary lui-button--size-tiny w-fit w-fit\" data-controller=\"lui--button\" data-input-target=\"submit\" data-action=\"click-\u0026gt;input#setLoading\" type=\"submit\" disabled=\"disabled\"\u003e\n  \n    \u003ci class=\"lui-button__icon lui-button__icon--tiny fa-regular fa-check\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\n    \n    \n\u003c/button\u003e\n\n\n    \u003c/span\u003e\n  \u003c/div\u003e\n\n\u003c/div\u003e\n\n        \u003c/div\u003e\n    \u003cdiv class=\"hidden\" data-table-filters-target=\"button\"\u003e\n        \u003cbutton class=\"lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit\" data-controller=\"lui--button\" data-action=\"click-\u0026gt;table-filters#clearAllFilters\"\u003e\n  \n    \u003ci class=\"lui-button__icon lui-button__icon--small fa-regular fa-eraser\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\n  \u003cspan class=\"lui-button__text\" data-lui--button-target=\"text\"\u003e\n    Clear all filters\n\u003c/span\u003e  \n    \n\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n","footerHtml":null,"filterCounterTemplateHtml":"\n  \u003cspan class=\"lui-counter lui-counter--tinny\" style=\"color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);\"\u003e\n    \u003cspan class=\"lui-counter__text\"\u003e:count:\u003c/span\u003e\n\u003c/span\u003e\n","sortingEnabled":false,"view_more":10,"viewMoreHtml":"\u003cbutton class=\"lui-button lui-button--neutral--tertiary lui-button--size-default w-fit w-fit\" data-controller=\"lui--button\"\u003e\n  \n    \n  \u003cspan class=\"lui-button__text\" data-lui--button-target=\"text\"\u003e\n    View more\n\u003c/span\u003e  \n    \n\u003c/button\u003e","fetchUrl":null,"selectable":null,"selectableType":null,"showPagination":true,"showPaginationSizeChanger":true,"showResultCount":true,"searchable":true,"theme":{"token":{"fontFamily":"Satoshi","borderRadius":4,"colorLink":"#212529","colorActive":"#212529","colorHover":"#212529","colorText":"#212529"},"components":{"Table":{"footerBg":"#ffffff","headerBg":"#F8F9FA","headerColor":"#495057","headerSortActiveBg":"#F8F9FA","headerSortHoverBg":"#F8F9FA","headerSortSortBg":"#F8F9FA","bodySortBg":"#ffffff","rowHoverBg":"#F8F9FA","borderColor":"#ECEFF2","headerBorderRadius":4,"rowSelectedBg":"#F8F9FA","rowSelectedHoverBg":"#F8F9FA","selectionColumnWidth":32,"headerSplitColor":"#ECEFF2","cellPaddingInlineSM":16},"Pagination":{"itemActiveBg":"transparent"}}},"treeIndentSize":15,"expandableConfig":{"defaultExpandAllRows":false,"indentSize":15}}" data-react-cache-id="Table-0"></div>
  </div>
</div>
<div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value="table_5793709857-collapse-tooltip"
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
  <div class="lui-tooltip__title">
    Expand/Collapse all
  </div>
</div>
<div id="_data_source" class="hidden">
  [{"name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_6597424226\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \u003cdiv class=\"whitespace-nowrap w-[200px]\"\u003eCategory 1\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","children":[{"name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_9912568611\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \u003cdiv class=\"whitespace-nowrap w-[200px]\"\u003e              Category 1.1\n\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":"Category 1.1_0}","_lui_data":{"delete_action":null}},{"name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_2322156580\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \u003cdiv class=\"whitespace-nowrap w-[200px]\"\u003e              Category 1.2\n\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":"Category 1.2_1}","_lui_data":{"delete_action":null}}],"_lui_key":"Category 1_0}","_lui_data":{"delete_action":null}},{"name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_5215854990\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \u003cdiv class=\"whitespace-nowrap w-[200px]\"\u003eCategory 2\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","children":[{"name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_8670528836\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \u003cdiv class=\"whitespace-nowrap w-[200px]\"\u003e              Category 2.1\n\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":"Category 2.1_0}","_lui_data":{"delete_action":null}},{"name":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_5793709857_cell_9451751915\" data-table-target=\"cell\"\u003e\n  \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n    \u003cdiv class=\"lui-tooltip hidden\"\n    data-controller=\"tooltips\"\n    data-tooltips-tippy-target-id-value=\"\"\n    data-tooltips-position-value=\"top\"\n    data-tooltips-interactive-value=\"false\"\n  \u003e\n\u003c/div\u003e\n\n    \u003cdiv class=\"whitespace-nowrap w-[200px]\"\u003e              Category 2.2\n\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"flex flex-row items-center justify-center\"\u003e\n    \n  \u003c/div\u003e\n\u003c/span\u003e\n","_lui_key":"Category 2.2_1}","_lui_data":{"delete_action":null}}],"_lui_key":"Category 2_1}","_lui_data":{"delete_action":null}}]
</div>
<div id="_pagination" class="hidden">
  {"current":1,"pageSize":15,"total":0}
</div>

Table

A table displays rows of data.

Show be used to display a collection of structured data, and to sort, search, paginate and filter data.

Used Components Components where is Used
FloatBar IndexLayout
DateShow IndexLayout

✅ Do

Order rows intuitively

Data should be initially rendered in an intuitive order. For example, starting with the most recently created items. By default, sort alphabetically by the first column's content.

Keep column headers short and consistent

Column headers are short labels used to define the kind of data that is shown in that column. If we already have similar column content, use same logica column header name.

Use “skeleton” placeholders to indicate loading content

When the content of the table is still loading, show a skeleton placeholder, this will improving the user experience by reducing uncertainty during loading times.

Communicate when the table has no data to show

If there is no data available for display in the table, present the table empty state within the table body.

Use correct column types

Before creating your table, please make sure that you use the appropriate types, to ensure that the correct components are being used.

❌ Don't

Don't use a single column to show multiple pieces of data

The column header should accurately represent the data point rendered in the column's cells. It would also be unclear which data point is being used when sorting or filtering.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<%
    columns = [
        {
            title: "Name",
            dataIndex: :name,
        },
        {
            title: "Features",
            dataIndex: :features,
        },
        {
            title: "Created At",
            dataIndex: :created_at,
        }
    ]
    # Example of nested category data
    data = [
        {
            name: "Category 1",
            children: [
                {
                    name: "Category 1.1",
                    children: [
                        {
                            name: "Category 1.1.1",
                        },
                        {
                            name: "Category 1.1.2",
                        }
                    ]
                },
                {
                    name: "Category 1.2",
                    children: [
                        {
                            name: "Category 1.2.1",
                        },
                        {
                            name: "Category 1.2.2",
                            children: [
                                {
                                    name: "Category 1.2.2.1"
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            name: "Category 2",
            children: [
                {
                    name: "Category 2.1",
                    children: [
                        {
                            name: "Category 2.1.1",
                        },
                        {
                            name: "Category 2.1.2",
                        }
                    ]
                },
                {
                    name: "Category 2.2",
                    children: [
                        {
                            name: "Category 2.2.1",
                        },
                        {
                            name: "Category 2.2.2",
                        }
                    ]
                }
            ]
        }
    ]
    options = {
        tree_indent_size: params[:tree_indent_size] || 15,
        columns:,
        expandable_config: {
            default_expand_all_rows: params[:default_expand_all_rows] || false,
            indent_size: params[:indent_size] || 15,
        }
    }
%>
<%= render LooposUi::V2::Table.new(**options) do |table| %>
  <% data.each_with_index do |category, i| %>
    <% table.with_row(key: "#{category[:name]}_#{i}}") do |row| %>
      <% row.with_cell(property: :name) do %>
        <% tag.div(class: "whitespace-nowrap w-[200px]") do %>
          <% category[:name] %>
        <% end %>
      <% end %>
      <% (category[:children] || []).each_with_index do |child_category,j| %>
        <%= row.with_child(key: "#{child_category[:name]}_#{j}}") do |child_row| %>
          <% child_row.with_cell(property: :name) do %>
            <% tag.div(class: "whitespace-nowrap w-[200px]") do %>
              <%= child_category[:name] %>
            <% end %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

No notes provided.

Param Description Input

Change this to adjust the tree indent size

Expand all rows by default

Description

The Table component is used to display data in a tabular format. It is a wrapper around the Ant Design Table component.

Arguments

Property Default Description Example
id nil Unique id for this table. ⚠️ IMPORTANT: If you have more than one table being rended on the same page/response, it's mandatory to set different ids for each table, otherwise one table could be hydrated by the wrong data.
columns: [] An array of column objects. Each column object should contain a name and label key. (check And Design docs). Columns can also have an optional type attribute with "html" as the value. This instructs the column to be rendered as is. [ { title: 'Name', dataIndex: 'name', key: 'name', type: "html" }, ...]
pagy: - Pagy object. Will be used to populate the pagination parameter. Recommended over the pagination parameter. -
pagination: { current: 1, pageSize: 10 } Pagination hash containing the current page, page size. The total number of records is calculated internally. {current: 1, pageSize: 10 }
data: [] An array of objects. Each object will be passed in dataSource (check Ant Design docs) {key: "key", name: "<div class='text-primary-tiny-regular'>#{Faker::Company.name}</div>", label: LooposUi::CounterLabel.new(text: "Label #{i}", color: LooposUi::CounterLabel::COLORS.keys.sample), products_count: rand(100), categories: (1 +rand(3)).times.map { Faker::Company.industry },}
selectable false Property that defines if the table elements are selectable. -
selectable_type checkbox Use checkbox for multiple selection, radio for single element selection -
searchable true If true the search input will be shown. -
search_placeholder nil String that will be used as the placeholder for the search input. If nil, the default placeholder (i18n file) will be used. -
global_filters nil An array of global filter objects. Used for filters that do not belong in a single column. Example use case: Show Drafts -
tree_indent_size 15 The indentation value for children columns. ⚠️ DEPRECATED, use expandable_config.indent_size -
show_pagination true Property that defines if the pagination and paginator components are shown. -
show_pagination_size_changer true Property that defines if the paginator components are shown. Ignored if show_pagination is false -
show_header true Property that defines if the header is shown. -
show_result_count true Property that defines if the result count is shown. -
expandable_config see bellow Configuration object for expandable rows -
fetch_url nil URL that will be used for fetch requests when filtering/searching/sorting. Note that this endpoint must respond with HTML content, and must render the same Table component that initially the table. -
manageable_rows false Property that defines if the table rows are manageable. Enables adding/removing rows. Check the Manageable Rows section bellow. -
add_new_url nil URL that will be used for adding new rows. Mandatory if manageable_rows is enabled. Check the Manageable Rows section bellow. -
sortable false Property that defines if the table rows can be reordered by dragging and dropping. -

The data also supports all basic data types, including strings, HTML strings, and ViewComponent objects.

Expandable Config schema

The expandable config follows the same structure as the Ant Design Table Expandable config. But currently only three keys are supported:

  • default_expanded_row_keys: An array of keys that will be expanded by default.
  • default_expand_all_rows : A boolean that will expand all rows by default. True will make all rows expanded, false will make all rows collapsed.
  • indent_size: The indentation value for children columns. No default. If present, overrides the deprecated tree_indent_size parameter.

Column Object

Columns is a hash, that accepts the following parameters:

  • title: The column title. This can be a simple string, or any HTML element.
  • dataIndex: The key of the data object. This key will be used as the key to create the payload for sort and filter requests.
  • key: The key of the column. This is used to check what property of the data row will be used to render the contents of the cell.
  • type: Optional parameter, currently only supports two values, the value "html"/:html, and the value "date"/:date. This will render the cell as HTML, without escaping the contents. If it's type :date, the column will automatically render a DateShow component with the string that was passed through.

These are the optional parameters:

  • sortable: Optional parameter, must be true or false. Defaults to false. This will make the column sortable.
  • searchable: Toggles the search input for the column. Defaults to true.
  • default_sort: Sets the default sort state for the column. Can be :asc or :desc. Doesn't actually sort the colum, the data must come already sorted.
  • sort_key: Optional parameter. Sets the key for sorting. The key is the name of the parameter that will be sent to the server. Defaults to dataIndex.
  • hidable: Optional parameter, must be true or false. Defaults to true. This will make the column hidable.
  • filters: Optional parameter, must be an array of objects. The schema is defined below. The presence of this key will make the column filterable.
  • filter_type: Optional parameter. Sets the type for all filters.
  • filter_key: Optional parameter. Sets the key for all filters. The key is the name of the parameter that will be sent to the server.
  • width, min_width, max_width: Optional parameters. Sets the inline style for width, minWidth and maxWidth respectively for the cell content. The value is in pixels.
  • fixed: Optional parameter. Accepts "left". Makes the column stick to the left side of the table.

Configure the column width

The Table will always take maximum width available, and distribute the columns to fit the content by default. You can set the width of the cell contents by using the width, min_width, and max_width parameters. Columns with a width lesser than the content will be truncated with ellipsis ('...'), and a tooltip will be shown with the full content. Note that this should only be set on columns that need to have fixed widths with text content, although it will work on any column, only the innerText will be displayed in the tooltip. Also, these parameters will only affect the cell content, and not the header content. You can experiment with this setting in the treewithrowrender_ example.

Sometimes you may want to have trucated text in cells where the content also has other HTML tags. In these cases, you can use the CSS class lui-table_cell--text, for example:

<% row.with_cell(property: :name) do %>
    <div class="flex gap-2">
        <%= render LooposUi::Image.new(image_url: presenter.image, size: "small") %>
            <%= link_to(
                presenter.name,
                presenter.show_path,
                data: { turbo_frame: 'lui-main-layout', turbo_action: :advance}, class: "lui-table_cell--text") %>
    </div>
<% end %>

Filter object schema

Property Default Description
text - The text that will be displayed in the filter.
value - The value that will be sent to the server when the filter is selected. Note: cannot contain $ symbol.
type - The type of the filter. This can be a symbolized name of a component class, or one of the following: :entity, :tag. Child components will assume the type of the parent component.
children - An array of filter objects.
key - The key that will be sent to the server when the filter is selected. Overrides filter_key column option for this specific filter.
enabled true If the filter is enabled or not. Note: this does not run the filter, only sets as the default state. It's up to the user to pass in already filtered data.

The filters parameter's type should be the symbolized name of the component class it represents, or one of the following: :entity, :tag, if the column does not represent a model in the system. Eg: Catalog::Product should be :catalog_product, or just :product.

dataIndexs value will be used to generate the payloads for sorting and filtering.

Example:

# Column definition
columns = [
    {
        title: "Type",
        dataIndex: :type,
        key: :type,
        sortable: true,
        filters: [
            { type: :tag, text: "Fire", value: "fire" },
            { type: :tag, text: "Water", value: "water" },
            ...
        ]
    }
    ...
]

Global filter object schema:

Property Default Description
text - The text that will be displayed in the filter.
type - The type of the filter. Currently only supports :toggle
key - The parameter that will be sent to the server. It's part of the query. Will be wrapped in q[:key].
default - The default state of the filter. Can be true or false.

Example for the query generated by the filters and sorting:

# When sorting (ascending), will generate the query:
sort_by=type:asc
# When sorting (ascending), will generate the query:
# if you declare a sort_key, it will be used instead of the dataIndex
# sort_key: :type_name
sort_by=type_name:asc
# When searching for "Fire", will generate the query:
q[search]=Fire
# When filtering, selecting Both "Fire" and "Water"
q[type][]=fire
q[type][]=water

Although it's not advised, the filters also support filtering with heterogeneous data, like Partner and PartnerGroup filters, on the same column. The alternative would be to implement a PartnerGroup column, and a Partner column, and filter them separately, or to handle such cases in the backend, by having some generic Partnable model. In any case, here is an example of how to handle such cases:

# Example of heterogeneous data (Partner, and PartnerGroups filters)
columns = [
    {
        title: "Partner",
        dataIndex: "partner_name",
        type: :html,
        sortable: true,
        filter_key: :partner_ids,
        filters: Partner.all.map { |partner|
            { text: partner.name, value: partner.id } } +
            PartnerGroup.all.map { |group|
            { text: group.name, value: group.id, key: :partner_group_ids } }
    }
]
# When filtering, selecting some partner, and some partner group, will generate the following query:
q[partner_ids][]=1
q[partner_ids][]=2
q[partner_group_ids][]=3

By default, the dataIndex will be used as the key for the filter, but this can be overriden by the filter_key parameter, and the key parameter in the filter object. The app decides how to handle these filters (should they be ORed, ANDed, etc).

⚠️ Warning: To prevent the filter results showing up empty, when using this method remember to use data RELATED to the subject of the table, not global data. Per example, if we wanted to do a table of brands, instead of doing this:

Product.all.map { |product| { text: product.name, value: product.id } }

We can do something like this:

Product.joins(:brand).distinct.map { |product| { text: product.name, value: product.id } }

That way, only products that are relevant will appear, making it so that we will always show results in the table.

Tree Table

(Slotted mode) You can also create a Tree Table by using the with_child slot on the row object. Refer to the tree example.

But more often than not, you will want to render a recursive tree, where manually defining the children is not feasible without knowing the depth of the tree. For these cases, it's recommended to use the the tree_render method on the row ViewComponent.

To use it, you must define a render function (refer to the tree with row render example). The main difference is that the function is defined in ruby, and not pre-precessed with .erb.

Note: Some caveats: due to how the ViewComponents are rendered, you cannot render objects in sequence. If you need to do so, you will have to concatenate them. You can do so using the concat method.

Then, when rendering the cable, call the tree_render method, and pass in:

  • The data object
  • A function that returns the children of the object
  • A function that returns the key for the row given the object (and optionally the list of parent objects, sorted by ascending level)
  • The render function

You also have access to the row object, so you can use it's methods to manipulate it's state. This is useful for example to set row_data.

Example:

# Define the render function
def render_function(row, data, level = 0)
    row.row_data = { ... }
    row.with_cell(property: :name) do
        # ...
    end
    row.with_cell(property: :features) do
        tag.span(class: "flex gap-2") do
            # Concatenating the objects
            concat render(LooposUi::Token.new(text: "Level #{level}")) # Important
            concat render(LooposUi::Token.new(text: "Another token"))  # Otherwise only the last statement will render
        end
    end
    row.with_action do
        render(LooposUi::Button.new(
            #...
        ))
    end
end
# Render the tree
<%= render LooposUi::V2::Table.new(**options) do |table| %>
    <% data.each_with_index do |category, i| %>
        <% table.with_row(key: "#{category[:name]}_#{i}}") do |row| %>
            <% row.tree_render(
                category,
                get_children_fn: proc { |c| c[:children] },
                key_fn: proc { |c,level| "#{c[:name]}_#{level}" },
                render_row_fn: method(:render_function)
            )%>
        <% end %>
    <% end %>
<% end %>

Check the provided example for more information (tree with row render)

The search input, located at the top right side of the table, will send a query to the server with the key q[search] and the value of the search input.

Slots

This component has two modes of usage, with arguments (data, columns, pagination) or with slots.

Slots Mode: When using the slots mode, only the columns argument is required.

Argument Mode: When using the argument mode, the columns and data arguments are required. Prefer the Slots Mode, most of the time argument mode will not be enough.

Argument Mode

Check Ant Design docs for more information about columns and data.

Example of column and data arguments:

columns = [
    { title: "ID", dataIndex: "id", key: "id" },
    { title: "Name", dataIndex: "name", key: "name", type: "html"},
    { title: "Type", dataIndex: "type", key: "type", type: "html" },
    { title: "HP", dataIndex: "hp", key: "hp" },
    { title: "Attack", dataIndex: "attack", key: "attack" },
    { title: "Defense", dataIndex: "defense", key: "defense" },
    { title: "Speed", dataIndex: "speed", key: "speed" },
    { title: "Ability", dataIndex: "ability", key: "ability", type: "html" }
]
pokemon_data = [
  {
    id: 1,
    name: "Bulbasaur",
    type: ["Grass", "Poison"],
    hp: 45,
    attack: 49,
    defense: 49,
    speed: 45,
    ability: "Overgrow"
  }
  #...
]

Slots Mode

When in slots mode, only the columns argument is required.

The data is defined within the slots using with_row and with_cell methods.

Row arguments

Property Default Description
key - The key of the row. This will be used to identify the row when selecting it. Mandatory and must be unique.
manageable_rows false Property that defines if the table rows are manageable. Enables adding/removing rows. Will be passed in from the table definition, but when rendering a manually needs to be set. Check Manageable Rows section bellow.
row_data {} A hash with data for the row object, that does not correspond to visible cell data. Useful when you want to capture the selected row event and access this data. Will be available in row._lui_data property.
delete_action - A hash with two possible properties: method (default DELETE), and url, mandatory. Check Manageable Rows section bellow.

Each row must have a unique key attribute, while each cell must have a property attribute that matches the dataIndex of the column.

Note, the row key attribute must be unique, and will be used to identify the row when selecting it.

Following is an example on how these rows could be defined:

<%= render LooposUi::V2::Table.new(pagination: pagination, columns: columns, **options) do |table| %>
    <% pokemon_data.each do |pokemon| %>
        <% table.with_row(key: pokemon.id) do |row| %>
            <% row.with_cell(property: :id).with_content(pokemon.id.to_s) %>
            <% row.with_cell(property: :name) do %>
                <%= tag.div( pokemon.name,  class: "text-secondary-base-bold") %>
            <% end %>
            <% row.with_cell(property: :type) do %>
                <div class="flex gap-2">
                    <% pokemon.type.each do |type| %>
                        <%= render LooposUi::TagToken.new(text: type, color: LooposUi::TagToken::COLORS.keys.sample ) %>
                    <% end %>
                </div>
            <% end %>
            <% row.with_cell(property: :hp).with_content(pokemon.hp.to_s) %>
            <%#... %>
            <% row.with_cell(property: :ability) do  %>
                <% tag.span(id: "pokemon_#{pokemon.id}_ability") do %>
                    <%= render LooposUi::Tooltip.new(title: pokemon.ability, tippy_target_id: "pokemon_#{pokemon.id}_ability") do |tooltip| %>
                        <% tooltip.with_description {Faker::Lorem.paragraphs.join} %>
                        <% tooltip.with_button(text: "Bulbapedia", leading_icon: "fa-regular fa-link", href: "#", type: :secondary, size: :tiny) %>
                    <% end %>
                    <%= render LooposUi::CounterLabel.new(text: pokemon.ability, icon: "fa-regular fa-info-circle") %>
                <% end %>
            <% end %>
        <% end %>
    <% end %>
<% end %>

Row actions

The Slots Mode also supports actions. When adding actions on a row, using the with_action slot, the table will render a new column that is only visible when hovering over the row.

Note: Currently the actions is an open slot, meaning that it can accept any content. However, it is recommended to use the Button component, and this may change in the future, making it mandatory.

<# ... >
<% row.with_action do %>
    <%= render LooposUi::Button.new(icon: "fa-regular fa-edit", type: :secondary, kind: :neutral )%>
<% end %>
<% row.with_action do %>
    <%= render LooposUi::Button.new(icon: "fa-regular fa-trash", type: :secondary, kind: :neutral )%>
<% end %>
<# ... >

You can also set a custom footer using the with_footer(**kwargs) slot. Any kwargs passed in will be forwarded to a wrapper div element that will hold your footer content. It's compatible with the manageable_rows - if it's set, a button to add a new row will be injected as the first child of the footer.

Eg:

<% table.with_footer(class: "w-full flex justify-between") do %>
  Some Footer Text
  <%= render LooposUi::Button.new(text: "Click me", type: :primary) %>
<% end %>

Manageable Rows

When the manageable_rows argument is set to true, the table will render a footer with a button to add new rows, and each row will also have an action to remove the row. The add_new_url argument (Table component) is mandatory when manageable_rows is set to true. Also, the delete_action argument is mandatory when defining the row.

To make this feature work, you need to:

  • Set manageable_rows to true in the table definition.
  • Define the add_new_url argument. Will be called (GET) when the user clicks the add new button.
  • Define the delete_action argument in the row definition. Will be called when the user clicks the automatically injected delete row action.
  • Create endpoints to handle the add and delete actions.

Add new row

The add_new_url endpoint must answer with a JSON object containing the new row data. Ex:

# Some controller
def table_new
    @new_row = LooposUi::V2::Table::Row.new(key: "unique key", manageable_rows: true,  delete_action: { url: "delete url" })
    render_to_string
    render(json: @new_row.data, content_type: "application/json")
end

And in the view, you must capture the output and call render_to_string in the controller.

<%# table_new.html.erb %>
<% capture do %>
  <%= render @new_row do |row| %>
    <% row.with_cell(property: :id) do %>
      <%= link_to pokemon.id, "#" %>
    <% end %>
    <%# ... %>
  <%# ... %>
<% end %>

The delete endpoint will be called, and the row will be removed regardless of the response.

Usage docs for this feature ends here, following is just an explanation as for why this is the way it is, for the curious:

You may be asking, why tho? This feels weird, and render_to_string?? 🤔 What is this?

It must be done this way because, even tough the Row in a ViewComponent, it's used only for enabling the developer to render the cells using a ViewComponent syntax. It's not meant to be rendered directly. We render the row this way (also how it's rendered internally by the table) just to populate the data object with the cell content (html), that will be then passed in as a prop to the table component. Here, it's the same process: We render the row, capture the output, collect the data and return it as JSON - this way the Table can just setData([...data, newRow]) without having to re-render the whole table.

Events

The Table component emits the following events:

  • tableElementsSelected, you can access the details.selectedElements to get the selected elements.
  • tableRowReorder, dispatched when a row is reordered by dragging and dropping. You can access event.detail.activeId (the ID of the dragged row) and event.detail.overId (the ID of the row it was dropped on) to handle the reordering logic.

Pagination

Pagination will only appear if there are more elements than the selected pageSize, and the selector to change page size will only appear if there are more than 15 elements. The pagination will be reset when applying a filter or sorting the table. The only valid pageSizes are 15,30 and 100. Any other value will be clamped to the nearest valid value. When the pagination is disabled, and there are more elements than the selected pageSize, a View More button will appear, that will showcase the current elements as well as the next 10.

Floating Bar

The Table component can also render a floating bar at the bottom of the table when one or more rows are selected. This happens only happens if the Table has selectable set to true, uses the with_action_bar slot, and has at least one action defined.