web-components is a collection of minimal, accessible Web Components.

• Data Grid

Installation

npm i @chronocide/web-components

Usage

Data Grid

Implements APG Data Grid, features:

• Full keyboard navigation
• Aria roles
• Pagination
• Sorting
• Searching

import { HTMLDatagridElement } from '@chronocide/web-components';

customElements.define('chrono-datagrid', HTMLDatagridElement);

<chrono-datagrid>
  <table>
    <thead>
      <tr>
        <th>name</th>
        <th>id</th>
        <th>nametype</th>
        <th>recclass</th>
        <th>mass (g)</th>
        <th>fall</th>
        <th>year</th>
        <th>reclat</th>
        <th>reclong</th>
        <th>GeoLocation</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Aachen</td>
        <td>1</td>
        <td>Valid</td>
        <td>L5</td>
        <td>21</td>
        <td>Fell</td>
        <td>1880</td>
        <td>50.775000</td>
        <td>6.083330</td>
        <td>(50.775, 6.08333)</td>
      </tr>
    </tbody>
  </table>
<chrono-datagrid>