Selectable Row Table - Free UI Component

Header Background #f8fafc

Header Text Color #475569

Row Background #ffffff

Selected Background #eff6ff

Checkbox Accent #2563eb

Text Color #334155

Border Color #e2e8f0

Vertical Padding (rem) 0.85

Container Width 1000px

Selectable Row Table

A robust data table equipped with individual row checkboxes and a master 'Select All' toggle, complete with highlighted states.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selectable Row Table</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        /* -- Variables ------------------------------------------------- */
        :root {
            --header-bg: {{headerBgColor}};
            --header-text: {{headerTextColor}};
            --row-bg: {{rowBgColor}};
            --selected-bg: {{selectedBgColor}};
            --accent: {{accentColor}};
            --text-color: {{textColor}};
            --border-color: {{borderColor}};
            --v-pad: {{vPadding}}rem;
            --table-w: {{tableWidth}};
        }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Roboto', sans-serif;
            background-color: #f1f5f9;
            color: var(--text-color);
            padding: 4rem 1.5rem;
            display: flex;
            align-items: center;
            flex-direction: column;
        }

.component-wrapper {
            width: 100%;
            max-width: var(--table-w);
        }

/* Bulk Action Bar */
        .bulk-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            padding: 1rem 1.5rem;
            min-height: 64px;
        }
        
        .bulk-info { font-size: 0.9em; font-weight: 500; display: none; }
        .bulk-info.visible { display: flex; align-items: center; gap: 1rem; }

.btn-delete {
            background-color: #fee2e2;
            color: #991b1b;
            border: none;
            padding: 0.4rem 1rem;
            border-radius: 4px;
            font-size: 0.8em;
            font-weight: 700;
            cursor: pointer;
            transition: 0.2s;
        }
        .btn-delete:hover { background-color: #fca5a5; }

/* Table Structure */
        .table-container {
            background: var(--row-bg);
            border-radius: 0 0 8px 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
            overflow: hidden;
        }
        
        .table-wrapper { overflow-x: auto; }

table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.9rem;
        }

th {
            background-color: var(--header-bg);
            color: var(--header-text);
            font-weight: 700;
            padding: var(--v-pad) 1.25rem;
            border-bottom: 2px solid var(--border-color);
        }

td {
            padding: var(--v-pad) 1.25rem;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-color);
            transition: background-color 0.2s;
        }

tbody tr:last-child td { border-bottom: none; }
        
        /* Checkbox Customization */
        .checkbox-cell { width: 50px; text-align: center; }
        input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--accent);
            cursor: pointer;
        }

/* Selected State */
        tr.selected td {
            background-color: var(--selected-bg);
        }

.icon { fill: #94a3b8; width: 16px; margin-right: 8px; vertical-align: middle; }
        .type-pdf .icon { fill: #ef4444; }
        .type-doc .icon { fill: #3b82f6; }
        .type-img .icon { fill: #10b981; }

</style>
</head>
<body>

<div class="component-wrapper">
        <div class="bulk-actions">
            <span style="font-weight: 500; font-size: 1.1em;">Document Repository</span>
            <div class="bulk-info" id="bulkInfo">
                <span id="selectedCount">0 selected</span>
                <button class="btn-delete">Delete Selected</button>
            </div>
        </div>

<div class="table-container">
            <div class="table-wrapper">
                <table id="selectableTable">
                    <thead>
                        <tr>
                            <th class="checkbox-cell">
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th>Filename</th>
                            <th>Size</th>
                            <th>Owner</th>
                            <th>Uploaded</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="checkbox-cell"><input type="checkbox" class="row-check"></td>
                            <td class="type-pdf"><svg class="icon" viewBox="0 0 384 512"><path d="M181.9 256.1c-5-16-4.9-46.9-2-46.9 8.4 0 7.6 36.9 2 46.9zm-1.7 47.2c-7.7 20.2-17.3 43.3-28.4 62.7 18.3-7 39-17.2 62.9-21.9-12.7-9.6-24.9-23.4-34.5-40.8zM86.1 428.1c0 .8 13.2-5.4 34.9-40.2-6.7 6.3-29.1 24.5-34.9 40.2zM216 32c0-17.67-14.33-32-32-32h-112C32.25 0 0 32.25 0 72v368c0 39.75 32.25 72 72 72h240c39.75 0 72-32.25 72-72V160L216 32zM320 440c0 17.64-14.36 32-32 32H72c-17.64 0-32-14.36-32-32V72C40 54.36 54.36 40 72 40h96v104c0 13.25 10.75 24 24 24h104v272z"/></svg>Q3_Financial_Review.pdf</td>
                            <td>4.2 MB</td>
                            <td>Arthur Pendelton</td>
                            <td>Oct 20, 2024</td>
                        </tr>
                        <tr>
                            <td class="checkbox-cell"><input type="checkbox" class="row-check"></td>
                            <td class="type-doc"><svg class="icon" viewBox="0 0 384 512"><path d="M0 64C0 28.65 28.65 0 64 0h160v128c0 17.67 14.33 32 32 32h128v288c0 35.35-28.65 64-64 64H64C28.65 512 0 483.3 0 448V64z"/></svg>Marketing_Strategy_V2.docx</td>
                            <td>1.1 MB</td>
                            <td>Sylvia Nunez</td>
                            <td>Oct 21, 2024</td>
                        </tr>
                        <tr>
                            <td class="checkbox-cell"><input type="checkbox" class="row-check"></td>
                            <td class="type-img"><svg class="icon" viewBox="0 0 512 512"><path d="M448 80c8.8 0 16 7.2 16 16V415.8l-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10L32 438.3V96c0-8.8 7.2-16 16-16H448zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg>Website_Hero_Banner.png</td>
                            <td>8.4 MB</td>
                            <td>Dominic Rossi</td>
                            <td>Oct 24, 2024</td>
                        </tr>
                        <tr>
                            <td class="checkbox-cell"><input type="checkbox" class="row-check"></td>
                            <td class="type-pdf"><svg class="icon" viewBox="0 0 384 512"><path d="M181.9 256.1c-5-16-4.9-46.9-2-46.9 8.4 0 7.6 36.9 2 46.9zm-1.7 47.2c-7.7 20.2-17.3 43.3-28.4 62.7 18.3-7 39-17.2 62.9-21.9-12.7-9.6-24.9-23.4-34.5-40.8zM86.1 428.1c0 .8 13.2-5.4 34.9-40.2-6.7 6.3-29.1 24.5-34.9 40.2zM216 32c0-17.67-14.33-32-32-32h-112C32.25 0 0 32.25 0 72v368c0 39.75 32.25 72 72 72h240c39.75 0 72-32.25 72-72V160L216 32zM320 440c0 17.64-14.36 32-32 32H72c-17.64 0-32-14.36-32-32V72C40 54.36 54.36 40 72 40h96v104c0 13.25 10.75 24 24 24h104v272z"/></svg>Employee_Handbook.pdf</td>
                            <td>2.2 MB</td>
                            <td>HR Dept</td>
                            <td>Oct 10, 2024</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

// Handle Individual Checks
            rowCheckboxes.forEach(chk => {
                chk.addEventListener('change', (e) => {
                    const row = e.target.closest('tr');
                    if (e.target.checked) row.classList.add('selected');
                    else row.classList.remove('selected');
                    
                    updateState();
                });
            });

// Handle Select All
            selectAllBtn.addEventListener('change', (e) => {
                const isChecked = e.target.checked;
                rowCheckboxes.forEach(chk => {
                    chk.checked = isChecked;
                    const row = chk.closest('tr');
                    if (isChecked) row.classList.add('selected');
                    else row.classList.remove('selected');
                });
                updateState();
            });

function updateState() {
                const selectedCount = table.querySelectorAll('.row-check:checked').length;
                const totalCount = rowCheckboxes.length;

// Sync "Select All" checkbox state properly
                selectAllBtn.checked = (selectedCount === totalCount && totalCount > 0);
                selectAllBtn.indeterminate = (selectedCount > 0 && selectedCount < totalCount);

// Show/Hide bulk actions
                if(selectedCount > 0) {
                    bulkInfoWrapper.classList.add('visible');
                    selectedCountLabel.innerText = `${selectedCount} item${selectedCount > 1 ? 's' : ''} selected`;
                } else {
                    bulkInfoWrapper.classList.remove('visible');
                }
            }
        });
    </script>
</body>
</html>