Alpine.js x-template: External template

by rameel

HTML

<template id="columns-template">
  <td x-text="item.name"></td>
  <td x-text="item.description"></td>
</template>

<div x-data="{
  items: [
    { name: 'Star', description: 'Luminous plasma sphere.' },
    { name: 'Planet', description: 'Body orbiting a star.' },
    { name: 'Galaxy', description: 'Stars and dust system.' },
    { name: 'Nebula', description: 'Cloud of gas in space.' }
  ]}">
  <table>
    <template x-for="item in items" :key="item.name">
      <tr x-template="columns-template"></tr>
    </template>
  </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-template@1/alpinegear-template.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>

CSS

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
}

td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td:first-of-type {
  text-align: right;
  font-weight: bold;
}

tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}