Form + Table Showcase

This showcase demonstrates a common business application pattern:

Form with various inputs and validation
Data table displaying submitted records
Dialog for confirmation

Features Demonstrated

CSS: buttons, inputs, select, checkbox, form-field, table, status
Web Components: <dsx-dialog>, <dsx-table>, <dsx-datepicker>, <dsx-dropdown-typeahead>

Live Demo

See examples/showcases/form-table/index.html for the full working demo.

Pattern Summary

<form class="dsx-grid dsx-grid--cols-2 dsx-gap-4">
  <div class="dsx-field">
    <label class="dsx-field__label">Name</label>
    <input class="dsx-input" required>
    <span class="dsx-field__error">Required</span>
  </div>

  <div class="dsx-field">
    <label class="dsx-field__label">Date</label>
    <dsx-datepicker></dsx-datepicker>
  </div>

  <div class="dsx-field">
    <label class="dsx-field__label">Category</label>
    <dsx-dropdown-typeahead searchable></dsx-dropdown-typeahead>
  </div>

  <div class="dsx-field">
    <label class="dsx-field__label">Status</label>
    <select class="dsx-select">
      <option>Active</option>
      <option>Inactive</option>
    </select>
  </div>
</form>

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

<dsx-dialog heading="Success" status="success">
  <p slot="body">Record saved successfully.</p>
  <div slot="footer">
    <button class="dsx-btn dsx-btn--primary">OK</button>
  </div>
</dsx-dialog>