Documentation
Basic
Extended
Blocks

Block table

It extends existing table layout and add checkbox support. Use class is-indeterminate to make checkbox indeterminate. Checked row should have class is-checked. To highlight row use class is-highlight.

Location Name Age Sex Status
Dave Gamache 26 Male San Francisco Dave Gamache 26 Male Active
Dwayne Johnson 42 Male Hayward Dave Gamache 26 Male Active
Dave Gamache 26 Male San Francisco Dave Gamache 26 Male Active
Dwayne Johnson 42 Male Hayward Dave Gamache 26 Male Active
Dwayne Johnson 42 Male Hayward Dave Gamache 26 Male Active
Dwayne Johnson 42 Male Hayward Dave Gamache 26 Male Active 


<div class="table-responsive">
    <table class="table table-primary full-width">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" name="" id="" class="form-check-input is-indeterminate" />
                </th>
                <th>
                    <button class="table-thead-label">
                        Name
                        <i class="iconoir-sort"></i>
                    </button>
                </th>
                <th>
                    <button class="table-thead-label">
                        Age
                        <i class="iconoir-sort-up"></i>
                    </button>
                </th>
                <th>
                    <button class="table-thead-label">
                        Sex
                        <i class="iconoir-sort-down"></i>
                    </button>
                </th>
                <th>Location</th>
                <th>Name</th>
                <th>Age</th>
                <th>Sex</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="" id="" class="form-check-input" />
                </td>
                <td>Dave Gamache</td>
                <td>26</td>
                <td>Male</td>
                <td>San Francisco</td>
                <td>Dave Gamache</td>
                <td>26</td>
                <td>Male</td>
                <td><span class="badge badge-primary">Active</span></td>
            </tr>
            <tr class="is-checked">
                <td>
                    <input type="checkbox" name="" id="" class="form-check-input" checked />
                </td>
                <td>Dwayne Johnson</td>
                <td>42</td>
                <td>Male</td>
                <td>Hayward</td>
                <td>Dave Gamache</td>
                <td>26</td>
                <td>Male</td>
                <td><span class="badge badge-secondary">Active</span></td>
            </tr>
            <tr class="is-checked">
                <td>
                    <input type="checkbox" name="" id="" class="form-check-input" checked />
                </td>
                <td>Dave Gamache</td>
                <td>26</td>
                <td>Male</td>
                <td>San Francisco</td>
                <td>Dave Gamache</td>
                <td>26</td>
                <td>Male</td>
                <td><span class="badge badge-tertiary">Active</span></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" id="" class="form-check-input" />
                </td>
                <td>Dwayne Johnson</td>
                <td>42</td>
                <td>Male</td>
                <td>Hayward</td>
                <td>Dave Gamache</td>
                <td>26</td>
                <td>Male</td>
                <td><span class="badge badge-danger">Active</span></td>
            </tr>
            <tr class="is-highlight">
                <td>
                    <input type="checkbox" name="" id="" class="form-check-input" />
                </td>
                <td>Dwayne Johnson</td>
                <td>42</td>
                <td>Male</td>
                <td>Hayward</td>
                <td>Dave Gamache</td>
                <td>26</td>
                <td>Male</td>
                <td><span class="badge badge-danger">Active</span></td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="" id="" class="form-check-input" />
                </td>
                <td>Dwayne Johnson</td>
                <td>42</td>
                <td>Male</td>
                <td>Hayward</td>
                <td>Dave Gamache</td>
                <td>26</td>
                <td>Male</td>
                <td><span class="badge badge-danger">Active</span></td>
            </tr>
        </tbody>
    </table>
</div>

Following JavaScript is used for this example:

const checkboxes = document.querySelectorAll('.js-checkbox');
const selectAll = document.getElementById('js-select-all');

const calculateSelectAll = () => {
    const checkboxArray = Array.from(checkboxes);

    if (checkboxArray.every((checkbox) => checkbox.checked)) {
        selectAll.classList.remove('is-indeterminate');
    } else if (checkboxArray.some((checkbox) => checkbox.checked)) {
        selectAll.classList.add('is-indeterminate');
    } else if (checkboxArray.every((checkbox) => !checkbox.checked)) {
        selectAll.classList.remove('is-indeterminate');
    }
}

selectAll.addEventListener('click', () => {
    checkboxes.forEach((checkbox) => {
        checkbox.checked = selectAll.checked;

        if (checkbox.checked) {
            checkbox.closest('tr').classList.add('is-checked');
        } else {
            checkbox.closest('tr').classList.remove('is-checked');
        }
    });

    calculateSelectAll();
});

checkboxes.forEach((checkbox) => {
    checkbox.addEventListener('click', () => {
        selectAll.checked = Array.from(checkboxes).every((checkbox) => checkbox.checked);

        calculateSelectAll();
    });
});