uploads-tables-mockup.html

<div class="upload-page__sidebar">
    <div class="upload-table-header"><h2 class="upload-table-header__title">Uploads</h2>
        <div class="upload-table-header__controls"><p class="upload-table-header__notice">NB! Additional charges
            apply</p>
            <button class="button button--style-default"><span class="button__label">Start processing</span></button>
        </div>
    </div>
    <table class="upload-table">
        <thead>
        <tr>
            <th>Status</th>
            <th>Count</th>
            <th>Size</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Uploaded</td>
            <td>1200</td>
            <td>900 MB</td>
        </tr>
        <tr>
            <td>Queued</td>
            <td>0</td>
            <td>0 MB</td>
        </tr>
        <tr>
            <td>Structure created</td>
            <td>1500</td>
            <td>1.4 GB</td>
        </tr>
        <tr>
            <td>Image imported</td>
            <td>25000</td>
            <td>25 GB</td>
        </tr>
        <tr>
            <td>Features detected</td>
            <td>3000</td>
            <td>3.3 GB</td>
        </tr>
        <tr>
            <td>Defects detected</td>
            <td>120</td>
            <td>322 MB</td>
        </tr>
        </tbody>
    </table>
    <div class="upload-table-header" style="
    margin-top: 30px;
"><h2 class="upload-table-header__title">Processing queue</h2>
        <div class="upload-table-header__controls">
            <div class="upload-table-header__notice" style="
    margin-right: 6px;
">Page size:
            </div>
            <button class="button button--style-reversed" style="
    min-width: auto;
    margin-left: 0;
">
                <span class="button__label">100</span></button>

            <button class="button button--style-reversed" style="
    min-width: auto;
">
                <span class="button__label">500</span></button>
            <button class="button button--style-reversed" style="
    min-width: auto;
">
                <span class="button__label">All</span></button>
            <div class="upload-table-header__notice" style="
    margin-left: 18px;
    margin-right: 6px;
">Page:
            </div>
            <button class="button button--style-reversed" style="
    min-width: auto;
    margin-left: 0;
">
                <span class="button__label">1</span></button>
            <button class="button button--style-reversed" style="
    min-width: auto;
"><span class="button__label">2</span></button>
            <button class="button button--style-reversed" style="
    min-width: auto;
    margin-left: 12px;
    margin-right: 12px;
"><span class="button__label">11</span></button>
            <button class="button button--style-reversed" style="
    min-width: auto;
    margin-left: 0;
"><span class="button__label">21</span></button>
            <button class="button button--style-reversed" style="
    min-width: auto;
"><span class="button__label">22</span></button>
        </div>
    </div>
    <table class="upload-table">
        <thead>
        <tr>
            <th>Name</th>
            <th>Author</th>
            <th>Time</th>
            <th>Status</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>DJI_0086_R (2).JPG</td>
            <td>Radchenko K. Y.</td>
            <td>2020-06-26T05:56:03.039Z</td>
            <td>Uploaded</td>
        </tr>
        <tr>
            <td>DJI_0002_R.JPG</td>
            <td>Radchenko K. Y.</td>
            <td>2020-06-26T05:56:02.149Z</td>
            <td>Uploaded</td>
        </tr>
        <tr>
            <td>DJI_0085_R (2).JPG</td>
            <td>Radchenko K. Y.</td>
            <td>2020-06-26T05:56:02.004Z</td>
            <td>Uploaded</td>
        </tr>
        <tr>
            <td>DJI_0001_R.JPG</td>
            <td>Radchenko K. Y.</td>
            <td>2020-06-26T05:56:01.728Z</td>
            <td>Uploaded</td>
        </tr>
        </tbody>
    </table>
</div>