Skip to main content

Server templates

rc-pagination, rc-breadcrumbs, and rc-data-table enhance markup that a server page already has: a <nav> of page links, an ordered list of links, a table with sortable headers. A server-rendered app writes that markup once, in a partial, and every page that uses it works with or without JavaScript. This guide gives those partials for Rails (ERB), Laravel (Blade), and ASP.NET Core (Razor components).

The partials follow the same rules in every framework:

  • The server owns the state. The current page and sort order come from the request, and the partials write them as attributes (page, sort-key, sort-direction). The elements treat attributes the server sets as controlled state.
  • Every control is a link. Paging and sorting send a new request, so the markup works before the elements upgrade and with scripting off. Once they upgrade, the elements add names, aria-current, and announcements, and fire their events before the link navigates.
  • The partial writes the accessible state too. It sets aria-current and aria-sort itself, so the first paint is correct and a page update that morphs the DOM (Turbo, Livewire, htmx) keeps it. See Pages updated by DOM morphing.

CI renders each partial in this guide with ActionView, Blade, and the Razor HtmlRenderer, and checks the output against the markup the components document.

Loading the elements​

Register the elements in the page layout, from your bundler's entry or a CDN as in the installation guide. Load the structural stylesheets so the markup has its layout before the definitions arrive:

<link
  rel="stylesheet"
  href="https://esm.sh/@rcarls/rc-pagination/base.css"
  data-rc-light-dom-base="rc-pagination"
/>
<link
  rel="stylesheet"
  href="https://esm.sh/@rcarls/rc-breadcrumbs/base.css"
  data-rc-light-dom-base="rc-breadcrumbs"
/>
<link
  rel="stylesheet"
  href="https://esm.sh/@rcarls/rc-data-table/base.css"
  data-rc-light-dom-base="rc-data-table"
/>
<script type="module" src="https://esm.sh/@rcarls/rc-webcomponents/rc-pagination/define"></script>
<script type="module" src="https://esm.sh/@rcarls/rc-webcomponents/rc-breadcrumbs/define"></script>
<script type="module" src="https://esm.sh/@rcarls/rc-webcomponents/rc-data-table/define"></script>

Partials​

Each page gives the partial for one component in all three frameworks:

After the page loads​

The elements fire rc-pagination-change and rc-data-table-sort before a link navigates. Leave the event alone and the link works as usual, including when Turbo or hx-boost takes it over. To load the new rows from your own script instead, cancel the event; that also cancels the link.