x
1
2
3
4
5
6
7
8
9
10
11
<div id="table_2221008637"> <div class="lui-table" id="table_2221008637" data-controller="table" data-table-data-source-id-value="_data_source" data-table-float-bar-outlet="#table_2221008637 .lui-table__floating_bar .lui-float_bar" data-table-columns-value="[{"title":"Invoice ID","dataIndex":"id","key":"id","type":"html","className":"lui-table__cell lui-table__cell--n0 lui-table__cell--first","hidable":true,"sorter":true,"sortKey":"id"},{"title":"State","dataIndex":"status","key":"status","type":"html","className":"lui-table__cell lui-table__cell--n1","hidable":true,"sorter":true,"sortKey":"status"},{"title":"Item ID","dataIndex":"item","key":"item","type":"html","className":"lui-table__cell lui-table__cell--n2","hidable":true,"sorter":true,"sortKey":"item"},{"title":"Invoice Kind","dataIndex":"kind","key":"kind","type":"html","className":"lui-table__cell lui-table__cell--n3","hidable":true,"sorter":true,"sortKey":"kind"},{"title":"Amount","dataIndex":"amount","key":"amount","type":"html","className":"lui-table__cell lui-table__cell--n4","hidable":true,"sorter":true,"sortKey":"amount"},{"title":"VAT","dataIndex":"vat","key":"vat","type":"html","className":"lui-table__cell lui-table__cell--n5","hidable":true,"sorter":true,"sortKey":"vat"},{"title":"Categories","dataIndex":"categories","key":"categories","sortable":false,"type":"html","className":"lui-table__cell lui-table__cell--n6","hidable":true},{"title":"Product","dataIndex":"product","key":"product","type":"html","className":"lui-table__cell lui-table__cell--n7","hidable":true,"sorter":true,"sortKey":"product"},{"title":"Brands","dataIndex":"brands","key":"brands","sortable":false,"type":"html","className":"lui-table__cell lui-table__cell--n8","hidable":true},{"title":"Created At","dataIndex":"created_at","key":"created_at","type":"html","className":"lui-table__cell lui-table__cell--n9 lui-table__cell--last","hidable":true,"sorter":true,"sortKey":"created_at"},{"dataIndex":"_lui_actions","key":"_lui_actions","className":"lui-table__actions","width":0,"type":"html"}]"> <div data-react-class="Table" data-react-props="{"uniqueId":"table_2221008637","id":"","lang":"en","columns":[{"title":"Invoice ID","dataIndex":"id","key":"id","type":"html","className":"lui-table__cell lui-table__cell--n0 lui-table__cell--first","hidable":true,"sorter":true,"sortKey":"id"},{"title":"State","dataIndex":"status","key":"status","type":"html","className":"lui-table__cell lui-table__cell--n1","hidable":true,"sorter":true,"sortKey":"status"},{"title":"Item ID","dataIndex":"item","key":"item","type":"html","className":"lui-table__cell lui-table__cell--n2","hidable":true,"sorter":true,"sortKey":"item"},{"title":"Invoice Kind","dataIndex":"kind","key":"kind","type":"html","className":"lui-table__cell lui-table__cell--n3","hidable":true,"sorter":true,"sortKey":"kind"},{"title":"Amount","dataIndex":"amount","key":"amount","type":"html","className":"lui-table__cell lui-table__cell--n4","hidable":true,"sorter":true,"sortKey":"amount"},{"title":"VAT","dataIndex":"vat","key":"vat","type":"html","className":"lui-table__cell lui-table__cell--n5","hidable":true,"sorter":true,"sortKey":"vat"},{"title":"Categories","dataIndex":"categories","key":"categories","sortable":false,"type":"html","className":"lui-table__cell lui-table__cell--n6","hidable":true},{"title":"Product","dataIndex":"product","key":"product","type":"html","className":"lui-table__cell lui-table__cell--n7","hidable":true,"sorter":true,"sortKey":"product"},{"title":"Brands","dataIndex":"brands","key":"brands","sortable":false,"type":"html","className":"lui-table__cell lui-table__cell--n8","hidable":true},{"title":"Created At","dataIndex":"created_at","key":"created_at","type":"html","className":"lui-table__cell lui-table__cell--n9 lui-table__cell--last","hidable":true,"sorter":true,"sortKey":"created_at"},{"dataIndex":"_lui_actions","key":"_lui_actions","className":"lui-table__actions","width":0,"type":"html"}],"searchQuery":null,"globalFiltersHtml":null,"hiddableColumnsHtml":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_7506690431\"\n class=\"lui-search\"\n data-search-input-outlet=\"#looposui-inputs-search_table__search_input_7506690431 .lui-inner-input\"\n data-search-event-only-value=\"true\"\n \u003e\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--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative\" data-controller=\"lui--button\" data-input-target=\"cancel\" data-action=\"click-\u0026gt;input#handleClose\" type=\"button\" disabled=\"disabled\"\u003e\n \n \u003cdiv class=\"opacity-100 inline-flex\" data-lui--button-target=\"leadingIcon\"\u003e\n \u003cdiv class=\"flex items-center justify-center\" style=\"width: 12px; height: 12px;\"\u003e\u003ci class=\"lui-button__icon lui-button__icon--tiny fa-regular fa-xmark\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\u003c/div\u003e\n\u003c/div\u003e \u003cdiv class=\"absolute w-full flex items-center justify-center opacity-0\" data-lui--button-target=\"loadingIcon\"\u003e\n \u003ci class=\"lui-m_icon animate-spin material-symbols-outlined\" style=\"--lui-micon-size: 12px;\"\u003e\n progress_activity\n\u003c/i\u003e\n \u003c/div\u003e\n\u003c/button\u003e\n \u003cbutton class=\"lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative\" data-controller=\"lui--button\" data-input-target=\"submit\" data-action=\"click-\u0026gt;input#setLoading lui--button#startLoading\" type=\"submit\" disabled=\"disabled\"\u003e\n \n \u003cdiv class=\"opacity-100 inline-flex\" data-lui--button-target=\"leadingIcon\"\u003e\n \u003cdiv class=\"flex items-center justify-center\" style=\"width: 12px; height: 12px;\"\u003e\u003ci class=\"lui-button__icon lui-button__icon--tiny fa-regular fa-check\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\u003c/div\u003e\n\u003c/div\u003e \u003cdiv class=\"absolute w-full flex items-center justify-center opacity-0\" data-lui--button-target=\"loadingIcon\"\u003e\n \u003ci class=\"lui-m_icon animate-spin material-symbols-outlined\" style=\"--lui-micon-size: 12px;\"\u003e\n progress_activity\n\u003c/i\u003e\n \u003c/div\u003e\n\u003c/button\u003e\n \u003c/span\u003e\n \u003c/div\u003e\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 relative\" data-controller=\"lui--button\" data-action=\"click-\u0026gt;table-filters#clearAllFilters\"\u003e\n \n \u003cdiv class=\"opacity-100 inline-flex\" data-lui--button-target=\"leadingIcon\"\u003e\n \u003cdiv class=\"flex items-center justify-center\" style=\"width: 14px; height: 14px;\"\u003e\u003ci class=\"lui-button__icon lui-button__icon--small fa-regular fa-eraser\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\u003c/div\u003e\n\u003c/div\u003e \u003cspan class=\"lui-button__text opacity-100 inline-flex\" data-lui--button-target=\"text\"\u003e\n Clear all filters\n\u003c/span\u003e \u003cdiv class=\"absolute w-full flex items-center justify-center opacity-0\" data-lui--button-target=\"loadingIcon\"\u003e\n \u003ci class=\"lui-m_icon animate-spin material-symbols-outlined\" style=\"--lui-micon-size: 14px;\"\u003e\n progress_activity\n\u003c/i\u003e\n \u003c/div\u003e\n\u003c/button\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n","footerHtml":null,"clearFiltersHtml":"\u003cbutton class=\"lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit relative\" data-controller=\"lui--button\"\u003e\n \n \u003cdiv class=\"opacity-100 inline-flex\" data-lui--button-target=\"leadingIcon\"\u003e\n \u003cdiv class=\"flex items-center justify-center\" style=\"width: 14px; height: 14px;\"\u003e\u003ci class=\"lui-button__icon lui-button__icon--small fa-regular fa-eraser\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\u003c/div\u003e\n\u003c/div\u003e \u003cspan class=\"lui-button__text opacity-100 inline-flex\" data-lui--button-target=\"text\"\u003e\n Clear all filters\n\u003c/span\u003e \u003cdiv class=\"absolute w-full flex items-center justify-center opacity-0\" data-lui--button-target=\"loadingIcon\"\u003e\n \u003ci class=\"lui-m_icon animate-spin material-symbols-outlined\" style=\"--lui-micon-size: 14px;\"\u003e\n progress_activity\n\u003c/i\u003e\n \u003c/div\u003e\n\u003c/button\u003e","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":true,"view_more":10,"viewMoreHtml":"\u003cbutton class=\"lui-button lui-button--neutral--tertiary lui-button--size-default w-fit w-fit relative\" data-controller=\"lui--button\"\u003e\n \n \u003cspan class=\"lui-button__text opacity-100 inline-flex\" data-lui--button-target=\"text\"\u003e\n View more\n\u003c/span\u003e \u003cdiv class=\"absolute w-full flex items-center justify-center opacity-0\" data-lui--button-target=\"loadingIcon\"\u003e\n \u003ci class=\"lui-m_icon animate-spin material-symbols-outlined\" style=\"--lui-micon-size: 16px;\"\u003e\n progress_activity\n\u003c/i\u003e\n \u003c/div\u003e\n\u003c/button\u003e","fetchUrl":null,"filtersUrl":null,"selectable":false,"selectableType":null,"showPagination":true,"showPaginationSizeChanger":true,"showResultCount":true,"searchable":true,"theme":{"token":{"fontFamily":"IBM Plex Sans","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},"initialFilters":{}}" data-react-cache-id="Table-0"></div> </div></div><div id="_data_source" class="hidden"> [{"id":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_72784905\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003ca data-turbo=\"false\" href=\"#\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003e0\u003c/div\u003e\n\u003c/a\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","status":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_8754634251\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan\u003e\n \u003cspan class=\"lui-label\" style=\"color: #1a883f; background-color: #f3f9f5;\"\u003e\n \n \n\u003cspan class=\"lui-label__text\" data-lui--label=\"content\"\u003eFinalized\u003c/span\u003e\n\n\u003c/span\u003e\n \u003c/span\u003e\n\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","item":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_9549067903\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_8805092107\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-box\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eBIL-0\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\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","kind":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_5241998104\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_5763486743\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \n \n \u003cspan class=\"lui-token__text\"\u003eDebit Note\u003c/span\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\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","categories":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_8764272345\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv id=\"lui-token_list_4162678364\" class=\"lui-token-list lui-token-list--horizontal\"\n data-controller=\"token-list\"\n data-token-list-frame-id-value=\"lui-token_list_4162678364_frame\"\n data-token-list-model-association-overlay-outlet=\"#lui-token_list_4162678364 .lui-association-overlay\"\u003e\n \u003cturbo-frame class=\"lui-token-list__items\" id=\"lui-token_list_4162678364_frame\"\u003e\n \u003cdiv data-controller=\"drag\" class=\"lui-token-list__items\"\u003e\n \u003cspan id=\"lui-token_6562296111\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-grid\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eRubber\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan id=\"lui-token_825332967\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-grid\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003ePlastic\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan\u003e\n \n \u003cspan class=\"lui-counter lui-counter--increment\"\u003e\n \u003cspan class=\"lui-counter__text lui-counter__text--increment\"\u003e+1\u003c/span\u003e\n\u003c/span\u003e\n\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=\"true\"\n \u003e\n \u003cdiv class=\"lui-tooltip__description\"\u003e\n \n \u003cdiv class=\"flex flex-col gap-1\"\u003e\n \u003cspan id=\"lui-token_7908131255\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-grid\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eSilk\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003c/div\u003e\n\n \u003c/div\u003e\n\u003c/div\u003e\n \u003c/span\u003e\n \u003c/div\u003e\n\u003c/turbo-frame\u003e \n\u003c/div\u003e\n\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","product":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_2385877412\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_9788859606\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-box-open\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eGorgeous Granite Computer\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\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","brands":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_2636601246\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv id=\"lui-token_list_7559335647\" class=\"lui-token-list lui-token-list--horizontal\"\n data-controller=\"token-list\"\n data-token-list-frame-id-value=\"lui-token_list_7559335647_frame\"\n data-token-list-model-association-overlay-outlet=\"#lui-token_list_7559335647 .lui-association-overlay\"\u003e\n \u003cturbo-frame class=\"lui-token-list__items\" id=\"lui-token_list_7559335647_frame\"\u003e\n \u003cdiv data-controller=\"drag\" class=\"lui-token-list__items\"\u003e\n \u003cspan id=\"lui-token_8294220795\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-seal\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eApple\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan id=\"lui-token_3706990823\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-seal\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eLG\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan\u003e\n \n \u003cspan class=\"lui-counter lui-counter--increment\"\u003e\n \u003cspan class=\"lui-counter__text lui-counter__text--increment\"\u003e+1\u003c/span\u003e\n\u003c/span\u003e\n\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=\"true\"\n \u003e\n \u003cdiv class=\"lui-tooltip__description\"\u003e\n \n \u003cdiv class=\"flex flex-col gap-1\"\u003e\n \u003cspan id=\"lui-token_2142064797\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-seal\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eApple\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003c/div\u003e\n\n \u003c/div\u003e\n\u003c/div\u003e\n \u003c/span\u003e\n \u003c/div\u003e\n\u003c/turbo-frame\u003e \n\u003c/div\u003e\n\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","amount":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_2684486347\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003e62.24 €\u003c/div\u003e\n\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","vat":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_2483059156\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003eIVA13\u003c/div\u003e\n\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","created_at":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_4894515886\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan class=\"lui-date-show\"\u003e03-06-2026 18h12\u003c/span\u003e\n\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_actions":" \u003cdiv class=\"lui-table__actions\"\u003e\n \u003cdiv\u003e\n \u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_3300869910\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003ca class=\"lui-button lui-button--icon-only lui-button--neutral--tertiary lui-button--size-tiny w-fit w-fit relative\" data-controller=\"lui--button\" data-action=\"lui--button#startLoading\" data-turbo=\"false\" href=\"#\"\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 \u003cdiv class=\"lui-tooltip__title\"\u003e\n Open Invoice\n \u003c/div\u003e\n\u003c/div\u003e\n\n \u003cdiv class=\"opacity-100 inline-flex\" data-lui--button-target=\"leadingIcon\"\u003e\n \u003cdiv class=\"flex items-center justify-center\" style=\"width: 12px; height: 12px;\"\u003e\u003ci class=\"lui-button__icon lui-button__icon--tiny fa-regular fa-arrow-up-right-and-arrow-down-left-from-center\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\u003c/div\u003e\n\u003c/div\u003e \u003cdiv class=\"absolute w-full flex items-center justify-center opacity-0\" data-lui--button-target=\"loadingIcon\"\u003e\n \u003ci class=\"lui-m_icon animate-spin material-symbols-outlined\" style=\"--lui-micon-size: 12px;\"\u003e\n progress_activity\n\u003c/i\u003e\n \u003c/div\u003e\n\u003c/a\u003e\n \u003c/span\u003e\n\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\n \u003c/div\u003e\n\n \u003c/div\u003e\n","_lui_key":0,"_lui_data":{"delete_action":null}},{"id":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_4192768418\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003ca data-turbo=\"false\" href=\"#\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003e1\u003c/div\u003e\n\u003c/a\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","status":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_1922850234\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan\u003e\n \u003cspan class=\"lui-label\" style=\"color: #1a883f; background-color: #f3f9f5;\"\u003e\n \n \n\u003cspan class=\"lui-label__text\" data-lui--label=\"content\"\u003eSent\u003c/span\u003e\n\n\u003c/span\u003e\n \u003c/span\u003e\n\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","item":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_7576084865\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_2124044876\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-box\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eBIL-100\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\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","kind":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_2834981372\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_1730678948\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \n \n \u003cspan class=\"lui-token__text\"\u003eSimplified Invoice\u003c/span\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\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","categories":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_5261181648\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv id=\"lui-token_list_4018261080\" class=\"lui-token-list lui-token-list--horizontal\"\n data-controller=\"token-list\"\n data-token-list-frame-id-value=\"lui-token_list_4018261080_frame\"\n data-token-list-model-association-overlay-outlet=\"#lui-token_list_4018261080 .lui-association-overlay\"\u003e\n \u003cturbo-frame class=\"lui-token-list__items\" id=\"lui-token_list_4018261080_frame\"\u003e\n \u003cdiv data-controller=\"drag\" class=\"lui-token-list__items\"\u003e\n \u003cspan id=\"lui-token_2291648640\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-grid\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eCopper\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003c/div\u003e\n\u003c/turbo-frame\u003e \n\u003c/div\u003e\n\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","product":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_4248366148\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_7725955674\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-box-open\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eSynergistic Wooden Table\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\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","brands":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_3964422137\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv id=\"lui-token_list_8601240328\" class=\"lui-token-list lui-token-list--horizontal\"\n data-controller=\"token-list\"\n data-token-list-frame-id-value=\"lui-token_list_8601240328_frame\"\n data-token-list-model-association-overlay-outlet=\"#lui-token_list_8601240328 .lui-association-overlay\"\u003e\n \u003cturbo-frame class=\"lui-token-list__items\" id=\"lui-token_list_8601240328_frame\"\u003e\n \u003cdiv data-controller=\"drag\" class=\"lui-token-list__items\"\u003e\n \u003cspan id=\"lui-token_1118583421\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-seal\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eLG\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003c/div\u003e\n\u003c/turbo-frame\u003e \n\u003c/div\u003e\n\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","amount":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_3330544027\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003e97.79 €\u003c/div\u003e\n\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","vat":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_2016300096\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003eIVA0\u003c/div\u003e\n\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","created_at":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_6879653647\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan class=\"lui-date-show\"\u003e02-06-2026 18h12\u003c/span\u003e\n\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_actions":" \u003cdiv class=\"lui-table__actions\"\u003e\n \u003cdiv\u003e\n \u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_1021198885\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003ca class=\"lui-button lui-button--icon-only lui-button--neutral--tertiary lui-button--size-tiny w-fit w-fit relative\" data-controller=\"lui--button\" data-action=\"lui--button#startLoading\" data-turbo=\"false\" href=\"#\"\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 \u003cdiv class=\"lui-tooltip__title\"\u003e\n Open Invoice\n \u003c/div\u003e\n\u003c/div\u003e\n\n \u003cdiv class=\"opacity-100 inline-flex\" data-lui--button-target=\"leadingIcon\"\u003e\n \u003cdiv class=\"flex items-center justify-center\" style=\"width: 12px; height: 12px;\"\u003e\u003ci class=\"lui-button__icon lui-button__icon--tiny fa-regular fa-arrow-up-right-and-arrow-down-left-from-center\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\u003c/div\u003e\n\u003c/div\u003e \u003cdiv class=\"absolute w-full flex items-center justify-center opacity-0\" data-lui--button-target=\"loadingIcon\"\u003e\n \u003ci class=\"lui-m_icon animate-spin material-symbols-outlined\" style=\"--lui-micon-size: 12px;\"\u003e\n progress_activity\n\u003c/i\u003e\n \u003c/div\u003e\n\u003c/a\u003e\n \u003c/span\u003e\n\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\n \u003c/div\u003e\n\n \u003c/div\u003e\n","_lui_key":1,"_lui_data":{"delete_action":null}},{"id":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_8292272514\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003ca data-turbo=\"false\" href=\"#\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003e2\u003c/div\u003e\n\u003c/a\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","status":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_128667989\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan\u003e\n \u003cspan class=\"lui-label\" style=\"color: #1a883f; background-color: #f3f9f5;\"\u003e\n \n \n\u003cspan class=\"lui-label__text\" data-lui--label=\"content\"\u003eSent\u003c/span\u003e\n\n\u003c/span\u003e\n \u003c/span\u003e\n\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","item":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_1818877256\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_5845849905\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-box\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eBIL-200\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\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","kind":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_7222500681\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_1614819320\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \n \n \u003cspan class=\"lui-token__text\"\u003eSimplified Invoice\u003c/span\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\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","categories":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_8631422192\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv id=\"lui-token_list_6289607779\" class=\"lui-token-list lui-token-list--horizontal\"\n data-controller=\"token-list\"\n data-token-list-frame-id-value=\"lui-token_list_6289607779_frame\"\n data-token-list-model-association-overlay-outlet=\"#lui-token_list_6289607779 .lui-association-overlay\"\u003e\n \u003cturbo-frame class=\"lui-token-list__items\" id=\"lui-token_list_6289607779_frame\"\u003e\n \u003cdiv data-controller=\"drag\" class=\"lui-token-list__items\"\u003e\n \u003cspan id=\"lui-token_8451920046\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-grid\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eWool\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan id=\"lui-token_8291088668\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-grid\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eConcrete\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan\u003e\n \n \u003cspan class=\"lui-counter lui-counter--increment\"\u003e\n \u003cspan class=\"lui-counter__text lui-counter__text--increment\"\u003e+1\u003c/span\u003e\n\u003c/span\u003e\n\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=\"true\"\n \u003e\n \u003cdiv class=\"lui-tooltip__description\"\u003e\n \n \u003cdiv class=\"flex flex-col gap-1\"\u003e\n \u003cspan id=\"lui-token_3087995728\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-grid\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eCotton\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003c/div\u003e\n\n \u003c/div\u003e\n\u003c/div\u003e\n \u003c/span\u003e\n \u003c/div\u003e\n\u003c/turbo-frame\u003e \n\u003c/div\u003e\n\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","product":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_327911326\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_9064957803\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-box-open\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eGorgeous Steel Bench\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\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","brands":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_5002575333\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv id=\"lui-token_list_3044258490\" class=\"lui-token-list lui-token-list--horizontal\"\n data-controller=\"token-list\"\n data-token-list-frame-id-value=\"lui-token_list_3044258490_frame\"\n data-token-list-model-association-overlay-outlet=\"#lui-token_list_3044258490 .lui-association-overlay\"\u003e\n \u003cturbo-frame class=\"lui-token-list__items\" id=\"lui-token_list_3044258490_frame\"\u003e\n \u003cdiv data-controller=\"drag\" class=\"lui-token-list__items\"\u003e\n \u003cspan id=\"lui-token_1419769234\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-seal\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eSamsung\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan id=\"lui-token_4473258687\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-seal\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eBeats\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003c/div\u003e\n\u003c/turbo-frame\u003e \n\u003c/div\u003e\n\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","amount":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_5679941545\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003e55.03 €\u003c/div\u003e\n\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","vat":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_9607105380\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003eIVA23\u003c/div\u003e\n\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","created_at":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_8091642570\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan class=\"lui-date-show\"\u003e01-06-2026 18h12\u003c/span\u003e\n\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_actions":" \u003cdiv class=\"lui-table__actions\"\u003e\n \u003cdiv\u003e\n \u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_577448093\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003ca class=\"lui-button lui-button--icon-only lui-button--neutral--tertiary lui-button--size-tiny w-fit w-fit relative\" data-controller=\"lui--button\" data-action=\"lui--button#startLoading\" data-turbo=\"false\" href=\"#\"\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 \u003cdiv class=\"lui-tooltip__title\"\u003e\n Open Invoice\n \u003c/div\u003e\n\u003c/div\u003e\n\n \u003cdiv class=\"opacity-100 inline-flex\" data-lui--button-target=\"leadingIcon\"\u003e\n \u003cdiv class=\"flex items-center justify-center\" style=\"width: 12px; height: 12px;\"\u003e\u003ci class=\"lui-button__icon lui-button__icon--tiny fa-regular fa-arrow-up-right-and-arrow-down-left-from-center\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\u003c/div\u003e\n\u003c/div\u003e \u003cdiv class=\"absolute w-full flex items-center justify-center opacity-0\" data-lui--button-target=\"loadingIcon\"\u003e\n \u003ci class=\"lui-m_icon animate-spin material-symbols-outlined\" style=\"--lui-micon-size: 12px;\"\u003e\n progress_activity\n\u003c/i\u003e\n \u003c/div\u003e\n\u003c/a\u003e\n \u003c/span\u003e\n\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\n \u003c/div\u003e\n\n \u003c/div\u003e\n","_lui_key":2,"_lui_data":{"delete_action":null}},{"id":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_2744143746\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003ca data-turbo=\"false\" href=\"#\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003e3\u003c/div\u003e\n\u003c/a\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","status":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_2907068952\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan\u003e\n \u003cspan class=\"lui-label\" style=\"color: #0172e4; background-color: #f2f7fd;\"\u003e\n \n \n\u003cspan class=\"lui-label__text\" data-lui--label=\"content\"\u003eCreated\u003c/span\u003e\n\n\u003c/span\u003e\n \u003c/span\u003e\n\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","item":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_8868379668\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_898838542\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-box\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eBIL-300\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\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","kind":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_2788011139\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_8714337774\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \n \n \u003cspan class=\"lui-token__text\"\u003eInvoice\u003c/span\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\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","categories":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_4287010525\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv id=\"lui-token_list_2294517248\" class=\"lui-token-list lui-token-list--horizontal\"\n data-controller=\"token-list\"\n data-token-list-frame-id-value=\"lui-token_list_2294517248_frame\"\n data-token-list-model-association-overlay-outlet=\"#lui-token_list_2294517248 .lui-association-overlay\"\u003e\n \u003cturbo-frame class=\"lui-token-list__items\" id=\"lui-token_list_2294517248_frame\"\u003e\n \u003cdiv data-controller=\"drag\" class=\"lui-token-list__items\"\u003e\n \u003cspan id=\"lui-token_3833279846\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-grid\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eGranite\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan id=\"lui-token_3669439444\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-grid\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003ePaper\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003c/div\u003e\n\u003c/turbo-frame\u003e \n\u003c/div\u003e\n\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","product":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_9658055563\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_6027578032\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-box-open\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eGorgeous Linen Pants\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\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","brands":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_586999721\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv id=\"lui-token_list_7471387704\" class=\"lui-token-list lui-token-list--horizontal\"\n data-controller=\"token-list\"\n data-token-list-frame-id-value=\"lui-token_list_7471387704_frame\"\n data-token-list-model-association-overlay-outlet=\"#lui-token_list_7471387704 .lui-association-overlay\"\u003e\n \u003cturbo-frame class=\"lui-token-list__items\" id=\"lui-token_list_7471387704_frame\"\u003e\n \u003cdiv data-controller=\"drag\" class=\"lui-token-list__items\"\u003e\n \u003cspan id=\"lui-token_8968129850\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-seal\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eNikon\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan id=\"lui-token_1107350536\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-seal\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eLG\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan\u003e\n \n \u003cspan class=\"lui-counter lui-counter--increment\"\u003e\n \u003cspan class=\"lui-counter__text lui-counter__text--increment\"\u003e+1\u003c/span\u003e\n\u003c/span\u003e\n\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=\"true\"\n \u003e\n \u003cdiv class=\"lui-tooltip__description\"\u003e\n \n \u003cdiv class=\"flex flex-col gap-1\"\u003e\n \u003cspan id=\"lui-token_9104688222\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-seal\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eNike\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003c/div\u003e\n\n \u003c/div\u003e\n\u003c/div\u003e\n \u003c/span\u003e\n \u003c/div\u003e\n\u003c/turbo-frame\u003e \n\u003c/div\u003e\n\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","amount":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_3028349584\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003e34.36 €\u003c/div\u003e\n\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","vat":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_1100711206\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003eIVA13\u003c/div\u003e\n\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","created_at":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_2896741919\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan class=\"lui-date-show\"\u003e02-06-2026 18h12\u003c/span\u003e\n\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_actions":" \u003cdiv class=\"lui-table__actions\"\u003e\n \u003cdiv\u003e\n \u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_6691310159\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003ca class=\"lui-button lui-button--icon-only lui-button--neutral--tertiary lui-button--size-tiny w-fit w-fit relative\" data-controller=\"lui--button\" data-action=\"lui--button#startLoading\" data-turbo=\"false\" href=\"#\"\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 \u003cdiv class=\"lui-tooltip__title\"\u003e\n Open Invoice\n \u003c/div\u003e\n\u003c/div\u003e\n\n \u003cdiv class=\"opacity-100 inline-flex\" data-lui--button-target=\"leadingIcon\"\u003e\n \u003cdiv class=\"flex items-center justify-center\" style=\"width: 12px; height: 12px;\"\u003e\u003ci class=\"lui-button__icon lui-button__icon--tiny fa-regular fa-arrow-up-right-and-arrow-down-left-from-center\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\u003c/div\u003e\n\u003c/div\u003e \u003cdiv class=\"absolute w-full flex items-center justify-center opacity-0\" data-lui--button-target=\"loadingIcon\"\u003e\n \u003ci class=\"lui-m_icon animate-spin material-symbols-outlined\" style=\"--lui-micon-size: 12px;\"\u003e\n progress_activity\n\u003c/i\u003e\n \u003c/div\u003e\n\u003c/a\u003e\n \u003c/span\u003e\n\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\n \u003c/div\u003e\n\n \u003c/div\u003e\n","_lui_key":3,"_lui_data":{"delete_action":null}},{"id":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_7301003598\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003ca data-turbo=\"false\" href=\"#\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003e4\u003c/div\u003e\n\u003c/a\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","status":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_7501241323\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan\u003e\n \u003cspan class=\"lui-label\" style=\"color: #1a883f; background-color: #f3f9f5;\"\u003e\n \n \n\u003cspan class=\"lui-label__text\" data-lui--label=\"content\"\u003eSent\u003c/span\u003e\n\n\u003c/span\u003e\n \u003c/span\u003e\n\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","item":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_5201107447\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_6579543276\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-box\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eBIL-400\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\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","kind":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_7864554126\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_4533818928\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \n \n \u003cspan class=\"lui-token__text\"\u003eInvoice\u003c/span\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\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","categories":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_1125002801\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv id=\"lui-token_list_5034204035\" class=\"lui-token-list lui-token-list--horizontal\"\n data-controller=\"token-list\"\n data-token-list-frame-id-value=\"lui-token_list_5034204035_frame\"\n data-token-list-model-association-overlay-outlet=\"#lui-token_list_5034204035 .lui-association-overlay\"\u003e\n \u003cturbo-frame class=\"lui-token-list__items\" id=\"lui-token_list_5034204035_frame\"\u003e\n \u003cdiv data-controller=\"drag\" class=\"lui-token-list__items\"\u003e\n \u003cspan id=\"lui-token_6365016147\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-grid\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eAluminum\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan id=\"lui-token_5776445523\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-grid\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eGranite\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan\u003e\n \n \u003cspan class=\"lui-counter lui-counter--increment\"\u003e\n \u003cspan class=\"lui-counter__text lui-counter__text--increment\"\u003e+1\u003c/span\u003e\n\u003c/span\u003e\n\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=\"true\"\n \u003e\n \u003cdiv class=\"lui-tooltip__description\"\u003e\n \n \u003cdiv class=\"flex flex-col gap-1\"\u003e\n \u003cspan id=\"lui-token_9810824522\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-grid\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eWool\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003c/div\u003e\n\n \u003c/div\u003e\n\u003c/div\u003e\n \u003c/span\u003e\n \u003c/div\u003e\n\u003c/turbo-frame\u003e \n\u003c/div\u003e\n\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","product":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_3589813256\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan id=\"lui-token_8288865533\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-box-open\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eAwesome Steel Lamp\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\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","brands":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_5376531146\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv id=\"lui-token_list_1528582997\" class=\"lui-token-list lui-token-list--horizontal\"\n data-controller=\"token-list\"\n data-token-list-frame-id-value=\"lui-token_list_1528582997_frame\"\n data-token-list-model-association-overlay-outlet=\"#lui-token_list_1528582997 .lui-association-overlay\"\u003e\n \u003cturbo-frame class=\"lui-token-list__items\" id=\"lui-token_list_1528582997_frame\"\u003e\n \u003cdiv data-controller=\"drag\" class=\"lui-token-list__items\"\u003e\n \u003cspan id=\"lui-token_8746719581\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-seal\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eSamsung\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan id=\"lui-token_9309296590\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-seal\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eAdidas\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003cspan\u003e\n \n \u003cspan class=\"lui-counter lui-counter--increment\"\u003e\n \u003cspan class=\"lui-counter__text lui-counter__text--increment\"\u003e+1\u003c/span\u003e\n\u003c/span\u003e\n\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=\"true\"\n \u003e\n \u003cdiv class=\"lui-tooltip__description\"\u003e\n \n \u003cdiv class=\"flex flex-col gap-1\"\u003e\n \u003cspan id=\"lui-token_9255840044\" class=\"lui-token lui-entity-token lui-entity-token-general \" style=\"color: #212529;\"\u003e\n \n \u003ci class=\"lui-token__icon fa-regular fa-regular fa-seal\"\u003e\u003c/i\u003e\n \n \u003ca href=\"#\" class=\"lui-token__text lui-token__text--url\" data-turbo-frame=\"lui-main-layout\" data-turbo-action=\"advance\"\u003eBeats\u003c/a\u003e\n \u003cdiv class=\"lui-token__actions\"\u003e\n \u003c/div\u003e\n\u003c/span\u003e\n\n\n\n \u003c/div\u003e\n\n \u003c/div\u003e\n\u003c/div\u003e\n \u003c/span\u003e\n \u003c/div\u003e\n\u003c/turbo-frame\u003e \n\u003c/div\u003e\n\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","amount":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_4132608397\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003e1.52 €\u003c/div\u003e\n\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","vat":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_2332218437\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cdiv class=\"text-primary-sm-regular text-general-global-black\"\u003eIVA0\u003c/div\u003e\n\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","created_at":"\u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_8039352071\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003cspan class=\"lui-date-show\"\u003e01-06-2026 18h12\u003c/span\u003e\n\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_actions":" \u003cdiv class=\"lui-table__actions\"\u003e\n \u003cdiv\u003e\n \u003cspan class=\"lui-table__cell-content\" style=\"\" id=\"table_2221008637_cell_985171838\" data-table-target=\"cell\"\u003e\n \u003cdiv class=\"lui-table__cell-content_slot\"\u003e\n \u003ca class=\"lui-button lui-button--icon-only lui-button--neutral--tertiary lui-button--size-tiny w-fit w-fit relative\" data-controller=\"lui--button\" data-action=\"lui--button#startLoading\" data-turbo=\"false\" href=\"#\"\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 \u003cdiv class=\"lui-tooltip__title\"\u003e\n Open Invoice\n \u003c/div\u003e\n\u003c/div\u003e\n\n \u003cdiv class=\"opacity-100 inline-flex\" data-lui--button-target=\"leadingIcon\"\u003e\n \u003cdiv class=\"flex items-center justify-center\" style=\"width: 12px; height: 12px;\"\u003e\u003ci class=\"lui-button__icon lui-button__icon--tiny fa-regular fa-arrow-up-right-and-arrow-down-left-from-center\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\u003c/div\u003e\n\u003c/div\u003e \u003cdiv class=\"absolute w-full flex items-center justify-center opacity-0\" data-lui--button-target=\"loadingIcon\"\u003e\n \u003ci class=\"lui-m_icon animate-spin material-symbols-outlined\" style=\"--lui-micon-size: 12px;\"\u003e\n progress_activity\n\u003c/i\u003e\n \u003c/div\u003e\n\u003c/a\u003e\n \u003c/span\u003e\n\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\n \u003c/div\u003e\n\n \u003c/div\u003e\n","_lui_key":4,"_lui_data":{"delete_action":null}}]</div><div id="_pagination" class="hidden"> {"current":1,"pageSize":5,"total":25}</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.
Related components
| 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
<% invoices = 25.times.map do |i| item_full_id = "BIL-#{i * 100}" status = ["created", "pending", "draft", "finalized", "sent", "failed"].sample data = { key: i, id: i, show_url: "#", status: status, item: { id: i, full_id: item_full_id, show_url: "#" }, kind: ["invoice", "simplified_invoice", "invoice_receipt", "credit_note", "debit_note"].sample, provider: { id: 0, name: "InvoiceExpress", show_url: "#" }, amount: "#{sprintf('%.2f', rand * 100)} €", vat: ["IVA23", "IVA6", "IVA0", "IVA13"].sample, partnable: { id: 0, name: Faker::Company.name, show_url: "#" }, # description: [item_full_id, nil].sample, categories: (rand * 3 + 1).floor.times.map { |i| { id: i, name: Faker::Commerce.material, show_url: "#" } }, product: { id: 0, name: Faker::Commerce.product_name, show_url: "#" }, brands: (rand * 3 + 1).floor.times.map { |i| { id: i, name: Faker::Commerce.brand, show_url: "#" } }, created_at: rand(DateTime.now..3.days.from_now.to_datetime).strftime("%d %h %Y, %H:%M"), error_messages: status == "failed" ? ["Teste"] : nil, } if !LooposUi.config.app_type?(:core) data.except!(:categories, :product, :brands) end ::LooposUi::Resources::InvoiceResource::Invoice.new(data) end permissions = { can_view_providers: params[:can_view_providers] || false, can_view_errors: params[:can_view_errors] || false, } pagination = { current: params[:page] || 1, pageSize: params[:per_page] || 5, total: invoices.size, } columns_extra = {} if params[:hide_column].present? columns_extra[params[:hide_column]] = { hidden: true } end invoices = invoices[(pagination[:current].to_i - 1) * pagination[:pageSize].to_i, pagination[:pageSize].to_i]%><%= render LooposUi::Services::Invoices::Table.new( pagination: pagination, data: invoices, permissions: permissions, columns_extra: columns_extra, selectable: params[:selectable] || false, float_bar_actions_params: { export_csv: { url: "#", }, }) %>No notes provided.
| Param | Description | Input |
|---|---|---|
|
Can view providers |
|
|
|
Can view errors |
|
|
|
Selectable |
|
|
|
Choose column to be hidden |
|
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 | - |
hidden_columns |
[] |
List of columns to hide before rendering. Accepts hashes with dataIndex or key. Useful for reusing a base column set while excluding a subset for a specific table instance. |
[ { dataIndex: :internal_id }, { key: :archived_at } ] |
hiddable_columns |
nil |
Array of toggle configs that allow the user to hide/show specific columns at runtime. Each entry should match a column dataIndex/key and renders a toggle in the header. |
[{ text: "Show Type Column", type: :toggle, key: "type", default: true }] |
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. | - |
view_more |
10 |
Number of extra rows to reveal when show_pagination is false and there are more records than the current page size. Controls how many rows the “View more” button adds at a time. |
20 |
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.
If a response or hydrated payload provides a non-array value for data (for example null), the component now safely falls back to an empty array to avoid runtime errors during rendering.
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 deprecatedtree_indent_sizeparameter.
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 betrueorfalse. Defaults tofalse. This will make the column sortable.searchable: Toggles the search input for the column. Defaults totrue.default_sort: Sets the default sort state for the column. Can be:ascor: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 todataIndex.hidable: Optional parameter, must betrueorfalse. Defaults totrue. 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.async_filter: Optional parameter, must be a hash. Enables async filter loading from a JSON endpoint. Currently this only works with flat filters; nested/tree filters are not supported in async mode. Useful for large filter sets where sending all filter options in the initial HTML would be too expensive.empty_filter: Optional parameter. Iftrue, will add en empty filter option with value_blank. You can customize the empty value by passing a hash with a value key, eg:empty_filter: { value: "none" }.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 forwidth,minWidthandmaxWidthrespectively 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 definitioncolumns = [ { title: "Type", dataIndex: :type, key: :type, sortable: true, filters: [ { type: :tag, text: "Fire", value: "fire" }, { type: :tag, text: "Water", value: "water" }, ... ] } ...]Async filters
For columns with many filter options, you can use async_filter instead of filters.
async_filter currently supports flat filters only. If your filters use children (tree/nested filters), keep using the regular static filters option.
This keeps the table backwards compatible:
- Use
filtersfor small static filter lists. - Use
async_filterfor large flat filter lists that should be fetched lazily.
The table will:
- Fetch the first page of filters when the table loads.
- Reuse those options when the dropdown is opened.
- Fetch the next page when the user scrolls to the bottom of the dropdown.
- Fetch from page 1 again when the user searches inside the filter dropdown.
Current limitations:
- Async filters currently support flat filters only.
- Filters with
childrenare not supported in async mode. - Tree/nested filters should still use the regular
filtersoption.
async_filter schema
| Property | Default | Description |
|---|---|---|
url |
- | JSON endpoint used to fetch filter options. Required. |
initial_page_size |
50 |
Number of filter options fetched for the first request. |
page_size |
50 |
Number of filter options fetched for subsequent pages. |
column_param |
column |
Query param name used to send the current column key. |
page_param |
page |
Query param name used to send the current page. |
per_page_param |
per_page |
Query param name used to send the page size. |
search_param |
search |
Query param name used to send the dropdown search term. |
Example:
columns = [ { title: "Ability", dataIndex: :ability, key: :ability, type: :html, filter_key: :ability, async_filter: { url: filter_options_pokemons_path, initial_page_size: 25, page_size: 25 } }]The endpoint must return JSON in the following format:
{ "filters": [ { "type": "tag", "text": "Blaze", "value": "Blaze" }, { "type": "tag", "text": "Overgrow", "value": "Overgrow" } ], "pagination": { "page": 1, "page_size": 25, "total_count": 269, "has_more": true, "next_page": 2 }}Notes:
- The
filtersarray follows the same flat filter object schema documented below. - The selected values still generate the same query payload as static filters, for example
q[ability][]=Blaze. - If you use
filter_key, that key will still be used in the outgoing filter params.
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_namesort_by=type_name:asc# When searching for "Fire", will generate the query:q[search]=Fire# When filtering, selecting Both "Fire" and "Water"q[type][]=fireq[type][]=waterAlthough 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][]=1q[partner_ids][]=2q[partner_group_ids][]=3By 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 functiondef 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( #... )) endend# 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)
Search
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 %><# ... >Row actions can include tooltips and disabled states, for example:
<%= render LooposUi::Button.for_row_action( icon: "candy", tooltip_text: "Add 10 levels", disabled: pokemon.level + 10 > Pokemon::MAX_LEVEL) %>Footer
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_rowstotruein the table definition. - Define the
add_new_urlargument. Will be called (GET) when the user clicks the add new button. - Define the
delete_actionargument 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 controllerdef 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")endAnd 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 thedetails.selectedElementsto get the selected elements.tableRowReorder, dispatched when a row is reordered by dragging and dropping. You can accessevent.detail.activeId(the ID of the dragged row) andevent.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.
You can change the amount of rows added per click with the view_more option (default 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.