Widgets

GridView

Usage:

<script>
    import { GridView } from '~ui/widgets/grid';
</script>

<GridView>
    <tr slot="columns">
        <th>Column A</th>
        <th>Column B</th>
        <th>Column C</th>
    </tr>

    <tbody slot="filters">
        <tr>
            <td><input name="col_a" /></td>
            <td><input name="col_b" /></td>
            <td><input name="col_c" /></td>
        </tr>
    </tbody>

    <tr slot="data-row" let:row>
        <td>{ row.col_a }</td>
        <td>{ row.col_b }</td>
        <td>{ row.col_c }</td>
    </tr>  
</GridView>

props

• api-url: The URL for fetching external data. The data must returns an array or object.
• collection: Property name of object returned by api-url for retrieving the data.
• paging: an object of pagination config contains properties:
  • limit: The limit of items on each page.
  • theme: Theme color of pagination widget. can be light or dark, default to light