Vanilla JS

Vanilla JavaScript

Setup

With a bundler

import '@bnotk/dsx/css/index.css';
import '@bnotk/dsx/components/dialog.js';
import '@bnotk/dsx/components/table.js';

Without a bundler (CDN or local)

<link rel="stylesheet" href="./node_modules/@bnotk/dsx/css/index.css">
<script type="module" src="./node_modules/@bnotk/dsx/components/dialog.js"></script>
<script type="module" src="./node_modules/@bnotk/dsx/components/table.js"></script>

CSS-Only Usage

Many features require no JavaScript at all:

<link rel="stylesheet" href="@bnotk/dsx/css/tokens.css">
<link rel="stylesheet" href="@bnotk/dsx/css/buttons.css">
<link rel="stylesheet" href="@bnotk/dsx/css/inputs.css">
<link rel="stylesheet" href="@bnotk/dsx/css/select.css">

<button class="dsx-btn dsx-btn--primary">Primary</button>
<input class="dsx-input" placeholder="Text input">
<select class="dsx-select">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Web Component Usage

<script type="module">
  import '@bnotk/dsx/components/table.js';
  import '@bnotk/dsx/components/dialog.js';

  const table = document.querySelector('dsx-table');
  table.columns = [
    { id: 'name', label: 'Name', resizable: true },
    { id: 'age', label: 'Age', width: '80px' },
  ];
  table.rows = [
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 },
  ];

  table.addEventListener('dsx-row-click', (e) => {
    console.log('Row clicked:', e.detail.row);
  });

  // Dialog
  const dialog = document.querySelector('dsx-dialog');
  document.querySelector('#open-btn').addEventListener('click', () => {
    dialog.show();
  });
</script>

<button id="open-btn" class="dsx-btn dsx-btn--primary">Open Dialog</button>

<dsx-table sortable column-toggle></dsx-table>

<dsx-dialog heading="Confirm" size="md">
  <p slot="body">Are you sure?</p>
  <div slot="footer">
    <button class="dsx-btn dsx-btn--secondary" onclick="this.closest('dsx-dialog').close()">
      Cancel
    </button>
    <button class="dsx-btn dsx-btn--primary" onclick="this.closest('dsx-dialog').close()">
      OK
    </button>
  </div>
</dsx-dialog>

Icons

<link rel="stylesheet" href="@bnotk/dsx/css/icons.css">

<!-- Using sprite -->
<svg class="dsx-icon">
  <use href="@bnotk/dsx/icons/sprite.svg#check"></use>
</svg>

<!-- Icon sizes -->
<svg class="dsx-icon dsx-icon--sm"><use href="...#info"></use></svg>
<svg class="dsx-icon dsx-icon--lg"><use href="...#warning"></use></svg>