Sortable

Sage sortable list


React Component

SageSortableItem as a Panel list

    • Tristique Elit Bibendum Etiam Cursus

      Label Text

      Authenticated Only
    • Tristique Elit Bibendum Etiam Cursus

      Label Text

      Authenticated Only
    • Tristique Elit Bibendum Etiam Cursus

      Label Text

      Authenticated Only

SageSortableItem as cards with no subtitles

  • Fringilla Ullamcorper Dolor Adipiscing Ultricies

    Authenticated Only
  • Fringilla Ullamcorper Dolor Adipiscing Ultricies

    Authenticated Only
  • Fringilla Ullamcorper Dolor Adipiscing Ultricies

    Authenticated Only

SageSortableItem as cards with images and without subtitles

  • Cover for Fringilla Ullamcorper Dolor Adipiscing Ultricies

    Fringilla Ullamcorper Dolor Adipiscing Ultricies

  • Cover for Fringilla Ullamcorper Dolor Adipiscing Ultricies

    Fringilla Ullamcorper Dolor Adipiscing Ultricies

  • Cover for Fringilla Ullamcorper Dolor Adipiscing Ultricies

    Fringilla Ullamcorper Dolor Adipiscing Ultricies

SageSortableItemCustom should be used when you want to create a layout within the Sortable Item that follows any pattern using specified dot and dash pattern denoted in the Sage Grid Templates docs. At its simpliest form, SageSortableItemCustom is SageSortableItem as cards with no image or subtitles, but any combination Sage Grid Template.

SageSortableItemCustom using a custom grid template : "te" as a Panel List

SageSortableItemCustom using a custom grid template : "me"as cards

Sage Component

SageSortable
<h3 class="t-sage-heading-6"><code>SageSortableItem</code> as a Panel list</h3>
<%= sage_component SagePanelList, {} do %>
  <%= sage_component SageSortable, { resource_name: "link" } do %>

    <% 3.times do %>
      <%= sage_component SageSortableItem, {
        title: "Tristique Elit Bibendum Etiam Cursus",
        subtitle: "Label Text",
        url_update: "update/endpoint",
        id: "id"
      } do %>
        <%= sage_component SageStatusIcon, {
          icon: "lock",
          value: "Authenticated Only"
        } %>
        <%= sage_component SageButton, {
          attributes: {
            "data-js-tooltip": "Preview"
          },
          style: "secondary",
          subtle: true,
          icon: { name: "preview-on", style: "only" },
          value: "Preview"
        } %>
        <%= sage_component SageButton, {
          attributes: {
            "data-js-tooltip": "Edit",
          },
          style: "secondary",
          subtle: true,
          icon: { name: "pen", style: "only" },
          value: "Edit"
        } %>
      <% end %>
    <% end %>

    <%= sage_component_section :empty do %>
      <%= sage_component SageEmptyState, {
        title: "Empty State Title",
        text: "Empty state text",
      } %>
    <% end %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6"><code>SageSortableItem</code> as cards with no subtitles</h3>
<%= sage_component SageSortable, { resource_name: "link" } do %>
  <% 3.times do %>
    <%= sage_component SageSortableItem, {
      title: "Fringilla Ullamcorper Dolor Adipiscing Ultricies",
      url_update: "update/endpoint",
      id: "id",
      card: true
    } do %>
      <%= sage_component SageStatusIcon, {
        icon: "lock",
        value: "Authenticated Only",
      } %>
      <%= sage_component SageButton, {
        attributes: {
          "data-js-tooltip": "Preview"
        },
        style: "secondary",
        subtle: true,
        icon: { name: "preview-on", style: "only" },
        value: "Preview"
      } %>
      <%= sage_component SageButton, {
        attributes: {
          "data-js-tooltip": "Edit",
        },
        style: "secondary",
        subtle: true,
        icon: { name: "pen", style: "only" },
        value: "Edit"
      } %>
    <% end %>
  <% end %>

  <%= sage_component_section :empty do %>
    <%= sage_component SageEmptyState, {
      title: "Empty State Title",
      text: "Empty state text",
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6"><code>SageSortableItem</code> as cards with images and without subtitles</h3>
<%= sage_component SageSortable, { resource_name: "link" } do %>
  <% 3.times do %>
    <%= sage_component SageSortableItem, {
      title: "Fringilla Ullamcorper Dolor Adipiscing Ultricies",
      url_update: "update/endpoint",
      image: "card-placeholder-sm.png",
      id: "id",
      card: true
    } do %>
      <%= sage_component SageButton, {
        attributes: {
          "data-js-tooltip": "Preview"
        },
        style: "secondary",
        subtle: true,
        icon: { name: "preview-on", style: "only" },
        value: "Preview"
      } %>
    <% end %>
  <% end %>

  <%= sage_component_section :empty do %>
    <%= sage_component SageEmptyState, {
      title: "Empty State Title",
      text: "Empty state text",
    } %>
  <% end %>
<% end %>


<%= md('
`SageSortableItemCustom` should be used when you want to create a layout within the Sortable Item that follows any pattern using specified dot and dash pattern denoted in the [Sage Grid Templates](../patterns/grid_templates) docs. At its simpliest form, `SageSortableItemCustom` is `SageSortableItem` as cards with no image or subtitles, but any combination Sage Grid Template.
', use_sage_type: true) %>

<h3 class="t-sage-heading-6"><code>SageSortableItemCustom</code> using a custom <code>grid template : "te"</code> as a Panel List</h3>
<%= sage_component SageSortable, { resource_name: "link" } do %>
  <% 3.times do |i| %>
    <%= sage_component SageSortableItemCustom, {
      grid_template: "te",
      id: "id",
      url_update: "update/endpoint",
    } do %>
      <div>
        <%= sage_component SageCheckbox, {
          id: "c#{i + 1}",
          label_text: "Checked",
          checked: true,
          disabled: false,
          has_error: false
        } %>
      </div>
      <%= sage_component SageDropdown, {
        align: "right",
        items: [
          {
            value: "Edit",
            icon: "pen",
            attributes: {},
          },
          {
            value: "Preview",
            icon: "preview-on",
            attributes: {},
          },
          {
            value: "Delete",
            style: "danger",
            border_before: true,
            modifiers: ["border-before"],
            icon: "trash",
            attributes: {},
          },
        ]
      } do %>
        <%= sage_component SageButton,  {
          style: "secondary",
          subtle: true,
          icon: { name: "dot-menu-horizontal", style: "only" },
          value: "edit",
        } %>
      <% end %>
    <% end %>
  <% end %>

  <%= sage_component_section :empty do %>
    <%= sage_component SageEmptyState, {
      title: "Empty State Title",
      text: "Empty state text",
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6"><code>SageSortableItemCustom</code> using a custom <code>grid template : "me"</code>as cards</h3>
<%= sage_component SageSortable, {
  resource_name: "link" } do %>
  <% 3.times do %>
    <%= sage_component SageSortableItemCustom, {
      card: true,
      grid_template: "me",
      id: "id",
      url_update: "update/endpoint",
    } do %>
      <div>
        <%= sage_component SageLink, { label: "Field 1", truncate: true, url: "#" } %>
      </div>
      <span>Field 2</span>
      <%= sage_component SageDropdown, {
        align: "right",
        items: [
          {
            value: "Edit",
            icon: "pen",
            attributes: {},
          },
          {
            value: "Preview",
            icon: "preview-on",
            attributes: {},
          },
          {
            value: "Delete",
            style: "danger",
            border_before: true,
            modifiers: ["border-before"],
            icon: "trash",
            attributes: {},
          },
        ]
      } do %>
        <%= sage_component SageButton,  {
          style: "secondary",
          subtle: true,
          icon: { name: "dot-menu-horizontal", style: "only" },
          value: "edit",
        } %>
      <% end %>
    <% end %>
  <% end %>

  <%= sage_component_section :empty do %>
    <%= sage_component SageEmptyState, {
      title: "Empty State Title",
      text: "Empty state text",
    } %>
  <% end %>
<% end %>

Property Description Type Default

resource_name

required

Sets the value for the data-js-sortable attribute.

String

nil

Sortable Row

card

Determines styling associated with SortableItem.

Boolean

false

grid_template

Sets the grid template to be used in the row of the component. See the Grid Templates to decide which pattern.

String

nil

gap

Adjusts the size of the gap between items in the row.

Optionally: [:xs | :sm | :md | :lg]

nil

id

The unique identifier for this component.

String

nil

url_update

Used in conjunction with JS to update the index or the sorted item.

String

nil