infinite-table/test/modal.html at main · igvteam/infinite-table · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InfiniteTable — Modal Test</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/infinite-table.css">
    <style>
        body { font-family: system-ui, sans-serif; padding: 2rem; max-width: 900px; margin: 0 auto; }
        h1 { font-size: 1.4rem; font-weight: 500; margin-bottom: 1rem; }
        p { color: #666; font-size: 0.9rem; margin-bottom: 1rem; }
        #result { font-size: 0.85rem; color: #333; margin-top: 1rem; white-space: pre-wrap; font-family: monospace; }
    </style>
</head>
<body>
    <h1>Modal Test — Bootstrap 5 integration</h1>
    <p>Verify: modal opens, table lazy-loads with spinner, rows selectable, OK returns selected data.</p>

    <button class="btn btn-primary" id="open-btn">Open Modal Table</button>
    <div id="result"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script type="module">
        import { createModalTable } from '../src/index.js'
        import { generateRows } from './helpers/generateData.js'

        const { columns, data } = generateRows(1000, 5)

        // Simulate async datasource like GenericDataSource
        const datasource = {
            columns: columns,
            columnDefs: {
                Column_1: { title: 'Name' },
                Column_2: { title: 'Category' }
            },
            async tableColumns() {
                return this.columns
            },
            async tableData() {
                // Simulate network delay
                await new Promise(r => setTimeout(r, 500))
                return data
            }
        }

        const modalTable = createModalTable({
            id: 'test-modal',
            title: 'Test Data',
            datasource: datasource,
            selectionStyle: 'multi',
            okHandler: (selected) => {
                document.getElementById('result').textContent =
                    `OK clicked — ${selected.length} rows selected:\n` +
                    JSON.stringify(selected.slice(0, 3), null, 2) +
                    (selected.length > 3 ? `\n... and ${selected.length - 3} more` : '')
            }
        })

        document.getElementById('open-btn').addEventListener('click', () => {
            modalTable.modal.show()
        })
    </script>
</body>
</html>