Editable tables

CSS file | JS file | Validations

For the questionnaire, some tables can be edited. Editable tables can include any number of columns, and columns have the option to be summated.

Payments and excessive withdrawals
Name Title Equity Interest Reasons for Payment Total Payments Actions
No items added yet

See the same example along different breakpoints.

<table class="sba-c-table sba-c-table--editable" id="table1" aria-live="polite" aria-atomic="true">
  <caption>Payments and excessive withdrawals</caption>
  <thead>
    <tr>
      <th scope="col" data-required="true" data-custom-id="Name">Name</th>
      <th scope="col" data-required="true" data-custom-id="Title">Title</th>
      <th scope="col" class="js-sum" data-info-type="percent" data-required="true" data-pattern="[0-9]*" data-custom-id="Equity Interest" data-min="0" data-max="100">Equity Interest</th>
      <th scope="col" data-hint-text="This is optional" data-custom-id="Reason">Reasons for Payment</th>
      <th scope="col" class="js-sum" data-info-type="usd" data-required="true" data-custom-id="Total Payments" data-min="0">Total Payments</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr id="table1_tr0_data">
      <th colspan="6"><em>No items added yet</em></th>
    </tr>
  </tbody>
</table>
<button type="button" class="sba-c-button" id="table1_add_item">Add item</button>

Guidance

The example shows the basic requirements for creating an editable table. Tables will need to have the following items:

  • Class names of sba-c-table and sba-c-table--editable
  • An ID
  • A table row to show a null state with an ID following the convention [TABLE_ID]_tr0_data. This table row must also include a th with a colspan that matches the total number of columns in the table.
  • An actions column
  • A button with an ID using a naming convention of [TABLE_ID]_add_item.

Options

The table has a few options for performing validation, summation, form hints, and other types of customization.

Customizing input IDs

Form fields in the table will generally have iteratable, generic IDs, such as [TABLE_ID]_tr0_field1. If you'd like to add some context to an id, place a data-custom-id attribute in the cell’s corresponding thead th.

  • Use characters that are only valid in an ID attribute
  • Spaces will be converted to underscores

When a custom id is applied, the input id is structured as [TABLE_ID]_tr0_field1_[CUSTOM_ID]

Using input ornaments

Editable tables can use special input ornaments when the user adds or edits a row. Input ornaments can be used for $USD or %. When using input ornaments, the script will automatically apply a '%' or '$' to the table cell.

  • To get a text field to appear as $USD, add the attribute data-info-type="usd" to the corresponding thead th. This will create a number input.
  • To get a text field to appear as %, add the attribute data-info-type="percent" to the corresponding thead th. This will create a number input.

Validation

It is possible to check validation on the form fields within the table. While front-end validation can improve user experience, front-end validation should NEVER be a substitute for server-side validation.

Validation can be be peformed upon:

  • Required fields:
    To use validation on required fields, add the attribute data-required="true" to the corresponding thead th.
  • Patterns:
    To validate for a pattern / trigger certain keyboards on mobile devices, use the attribute data-pattern to the field’s corresponding thead th and place the pattern you like to use as the value. Example: data-pattern="[0-9]*".
  • Min:
    To validate for a minimum value, use the attribute data-min to the field’s corresponding thead th. Example: data-min="0". This will convert the input type to number.
  • Max:
    To validate for a maximum value, use the attribute data-max to the field’s corresponding thead th. Example: data-max="100". This will convert the input type to number.
  • Minlength:
    To validate for a minimum number of characters, use the attribute data-minlength to the field’s corresponding thead th. Example: data-minlength="3".
  • Maxlength:
    To validate for a maximum number of characters, use the attribute data-maxlength to the field’s corresponding thead th. Example: data-maxlength="20".

Hint text

To place hint text between the form label and the input, write it the value of a data-hint-text data attribute on the corresponding column‘s thead th. Data hints are optional, but can provide necessary context.

Summating columns

Table columns can be summated by adding a class name of js-sum to the table column you would like to calculate. If an instance of js-sum is present, a table footer is automatically created after the first item is added after first row is created.

Other guidance

  • Editable tables are not to be sortable.
  • Tables are formatted for mobile web