← All layouts  ·  Admin

table_rows Data table workbench

Dense table with bulk actions, filters and pagination.

The bulk action bar appears in place of the filter bar when rows are selected, so the controls never compete for the same strip of screen.

• .ms-btn
• .ms-sidenav
• .ms-badge
• .ms-shell
• .ms-table
• .ms-input

Open full page

Live

The layout as it renders, in a frame at its own width. Resize the window to watch it respond — the frame is a real viewport.

How to build it

This is the layout's template, read from disk — the same file the frame above renders, so it cannot drift out of date. Copy it into your own page and replace the content; every class in it ships in mcgowan.css.

<div class="ms-shell">
    <aside class="ms-shell__sidebar">
        <div class="ms-shell__brand">Northbound</div>
        <ul class="ms-sidenav">
            <li class="ms-sidenav__section">Manage</li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">dashboard</span>Overview</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">group</span>Customers</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">inventory_2</span>Products</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link  ms-sidenav__link--active" href="#"><span class="material-icons">receipt_long</span>Orders</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">insights</span>Reports</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">settings</span>Settings</a></li>
        </ul>
    </aside>
    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <strong>Orders</strong>
            <span class="ms-toolbar__spacer"></span>
            <input class="ms-input" placeholder="Search" style="max-width:220px">
            <span class="ms-avatar-sm">AM</span>
        </div>
        <div class="ms-shell__body">
            <nav class="ms-breadcrumb"><span class="ms-breadcrumb-item">Home</span>
                <span class="ms-breadcrumb-item">Orders</span></nav>
            <div class="ms-card ms-card--flush">
                <div class="u-p-4">
                    <div class="ms-toolbar">
                        <span class="ms-badge ms-badge--info">2 selected</span>
                        <button class="ms-btn ms-btn--sm ms-btn--outline">Mark shipped</button>
                        <button class="ms-btn ms-btn--sm ms-btn--outline">Export</button>
                        <button class="ms-btn ms-btn--sm ms-btn--error">Cancel</button>
                        <span class="ms-toolbar__spacer"></span>
                        <input class="ms-input ms-input--sm" placeholder="Filter" style="max-width:200px">
                    </div>
                </div>
                <table class="ms-table ms-table--sortable ms-table--striped">
                    <thead>
                        <tr>
                            <th><input aria-label="Select all" type="checkbox"></th>
                            <th class="ms-table__sort-header">Order</th>
                            <th>Customer</th><th>Placed</th><th>Status</th>
                            <th class="u-text-right">Total</th><th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td><input checked type="checkbox"></td><td>#10482</td><td>Ellie Roberts</td>
                            <td>22 Aug</td><td><span class="ms-badge ms-badge--warning">Packing</span></td>
                            <td class="u-text-right">&pound;433.95</td>
                            <td><button class="ms-btn ms-btn--sm ms-btn--ghost">&hellip;</button></td></tr>
                        <tr><td><input checked type="checkbox"></td><td>#10481</td><td>James Doyle</td>
                            <td>22 Aug</td><td><span class="ms-badge ms-badge--warning">Packing</span></td>
                            <td class="u-text-right">&pound;95.00</td>
                            <td><button class="ms-btn ms-btn--sm ms-btn--ghost">&hellip;</button></td></tr>
                        <tr><td><input type="checkbox"></td><td>#10480</td><td>Priya Kaur</td>
                            <td>21 Aug</td><td><span class="ms-badge ms-badge--success">Shipped</span></td>
                            <td class="u-text-right">&pound;240.00</td>
                            <td><button class="ms-btn ms-btn--sm ms-btn--ghost">&hellip;</button></td></tr>
                        <tr><td><input type="checkbox"></td><td>#10479</td><td>Tom Mercer</td>
                            <td>21 Aug</td><td><span class="ms-badge ms-badge--danger">Refunded</span></td>
                            <td class="u-text-right">&pound;130.00</td>
                            <td><button class="ms-btn ms-btn--sm ms-btn--ghost">&hellip;</button></td></tr>
                    </tbody>
                </table>
                <div class="u-p-4">
                    <nav class="ms-pagination">
                        <a class="ms-btn ms-btn--sm ms-btn--outline" href="#">Previous</a>
                        <a class="ms-btn ms-btn--sm ms-btn--primary" href="#">1</a>
                        <a class="ms-btn ms-btn--sm ms-btn--outline" href="#">2</a>
                        <a class="ms-btn ms-btn--sm ms-btn--outline" href="#">Next</a>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

More admin layouts