Table

A table displays rows of data.

Column 1	Column 2	Column 3
Row 1	Row 2	Row 3	Update Delete
Row 1	Row 2	Row 3	Update Delete
Row 1	Row 2	Row 3	Update Delete

Basic

Simple table with actions.

<div class="SnTable-wrapper">
    <table class="SnTable">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th style="width: 100px"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1</td>
                <td>Row 2</td>
                <td>Row 3</td>
                <td>
                    <div class="SnTable-action">
                        <div class="SnBtn">Update</div>
                        <div class="SnBtn danger" onclick="onConfirmDelete()">Delete</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Row 1</td>
                <td>Row 2</td>
                <td>Row 3</td>
                <td>
                    <div class="SnTable-action">
                        <div class="SnBtn">Update</div>
                        <div class="SnBtn danger" onclick="onConfirmDelete()">Delete</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Row 1</td>
                <td>Row 2</td>
                <td>Row 3</td>
                <td>
                    <div class="SnTable-action">
                        <div class="SnBtn">Update</div>
                        <div class="SnBtn danger" onclick="onConfirmDelete()">Delete</div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

let onConfirmDelete = ()=>{
    SnModal.confirm({
        title: 'Are you sure delete this task?',
        content: 'Some descriptions',
        okText: 'Yes',
        okType: 'danger',
        cancelText: 'No',
        onOk() {
            console.log('onOk')
        },
        onCancel() {
            console.log('onCancel')
        }
    });
}

Column 1	Column 2	Column 3
Row 1	Row 2	Row 3	Update Delete
Row 1	Row 2	Row 3	Update Delete
Row 1	Row 2	Row 3	Update Delete
Rol 1	Rol 2	Rol 3

Footer

Simple table with actions and footer.

<div class="SnTable-wrapper">
    <table class="SnTable">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th style="width: 100px"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1</td>
                <td>Row 2</td>
                <td>Row 3</td>
                <td>
                    <div class="SnTable-action">
                        <div class="SnBtn">Update</div>
                        <div class="SnBtn danger" onclick="onConfirmDelete()">Delete</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Row 1</td>
                <td>Row 2</td>
                <td>Row 3</td>
                <td>
                    <div class="SnTable-action">
                        <div class="SnBtn">Update</div>
                        <div class="SnBtn danger" onclick="onConfirmDelete()">Delete</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Row 1</td>
                <td>Row 2</td>
                <td>Row 3</td>
                <td>
                    <div class="SnTable-action">
                        <div class="SnBtn">Update</div>
                        <div class="SnBtn danger" onclick="onConfirmDelete()">Delete</div>
                    </div>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Rol 1</td>
                <td>Rol 2</td>
                <td>Rol 3</td>
                <td> </td>
            </tr>
        </tfoot>
    </table>
</div>

let onConfirmDelete = ()=>{
    SnModal.confirm({
        title: 'Are you sure delete this task?',
        content: 'Some descriptions',
        okText: 'Yes',
        okType: 'danger',
        cancelText: 'No',
        onOk() {
            console.log('onOk')
        },
        onCancel() {
            console.log('onCancel')
        }
    });
}

Dynamic table

Advanced table.

<div class="dataTable></div>

let onConfirmDelete = ()=>{
    SnModal.confirm({
        title: 'Are you sure delete this task?',
        content: 'Some descriptions',
        okText: 'Yes',
        okType: 'danger',
        cancelText: 'No',
        onOk() {
            console.log('onOk')
        },
        onCancel() {
            console.log('onCancel')
        }
    });
}

API

Property	Class
Table	`.SnTable`
Wrapper	`.SnTable-wrapper`
Actions	`.SnTable-action`