telamonian/index.html

## index.html
<!--

   Copyright (c) 2020, the Regular Table Authors.

   This file is part of the Regular Table library, distributed under the terms of
   the Apache License 2.0.  The full license can be found in the LICENSE file.

-->

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <script src="https://cdn.jsdelivr.net/npm/regular-table@0.0.3/dist/umd/regular-table.js"></script>
    <link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/regular-table@0.0.3/dist/css/material.css">
</head>

<body>

    <regular-table></regular-table>

    <script>

        const NUM_ROWS = 100;
        const NUM_DIR = 10;

        const COLUMN_NAMES = ['modified', 'kind', 'writable'];
        const DIR_NAMES = ['able', 'baker', 'charlie', 'dog', 'easy', 'fox', 'george', 'how', 'item', 'jig', 'king', 'love', 'mike', 'nan', 'oboe', 'peter', 'queen', 'roger', 'sugar', 'tare', 'uncle', 'victor', 'william', 'xray', 'yoke', 'zebra'];
        const date_formatter = new Intl.DateTimeFormat("en-us");

        const _contents_cache = new Map();
        function getContents(path, expand) {
            // infinite recursive mock contents
            let contents;
            if (_contents_cache.has(path)) {
                contents = _contents_cache.get(path);
            } else {
                contents = {
                    path,
                    modified: new Date(12*60*60*1000),
                    kind: 'dir',
                    writable: false};
                _contents_cache.set(path, contents);
            }

            if (!expand || 'contents' in contents) {
                return contents;
            }

            contents.contents = []
            for (let i = 0; i < NUM_ROWS; i ++) {
                const subcontents = {
                    path: [...path, i < NUM_DIR ? `${DIR_NAMES[i]}/` : `file_${i - NUM_DIR}.txt`],
                    modified: new Date(contents.modified.getTime() + 24*60*60*1000*(365 + i)),
                    kind: i < NUM_DIR ? 'dir' : 'text',
                    writable: false,
                };

                _contents_cache.set(subcontents.path, subcontents);
                contents.contents.push(subcontents);
            }

            return contents;
        }

        let config = {
            column_pivots: [],
            row_pivots: ['path'],
        }

        let rows = getContents([], true).contents;

        // for tree support
        async function collapse(rix) {
            const contents = getContents(rows[rix].path);

            // splice out the contents of the collapsed node and any expanded subnodes
            let npop = contents.contents.length;
            let check_ix = rix + 1 + npop;
            while (rows[check_ix++].path.length > contents.path.length) {
                npop++;
            }

            rows.splice(rix + 1, npop);
        }

        async function expand(rix) {
            const contents = getContents(rows[rix].path, true);
            rows.splice(rix + 1, 0, ...contents.contents);
        }

        async function file_browser_model(start_col, start_row, end_col, end_row) {
            const data = [];
            for (let cix = start_col; cix < end_col; cix ++) {
                const name = COLUMN_NAMES[cix];
                data.push(rows.slice(start_row, end_row).map(c => {
                    return name === 'modified' ? date_formatter.format(c[name]) : c[name];
                }));
            }

            return {
                num_rows: rows.length,
                num_columns: COLUMN_NAMES.length,
                column_indices: COLUMN_NAMES.map(col => [col]),
                row_indices: rows.slice(start_row, end_row).map(c => c['path']),
                data,
                __collapse: collapse,
                __config: config,
                __expand: expand,
            };
        }

        const table = document.getElementsByTagName('regular-table')[0];
        table.setDataModel(file_browser_model);
    </script>

</body>

</html>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!--

	Copyright (c) 2020, the Regular Table Authors.

	This file is part of the Regular Table library, distributed under the terms of
	the Apache License 2.0. The full license can be found in the LICENSE file.

	-->

	<!DOCTYPE html>
	<html>

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<script src="https://cdn.jsdelivr.net/npm/regular-table@0.0.3/dist/umd/regular-table.js"></script>
	<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/regular-table@0.0.3/dist/css/material.css">
	</head>

	<body>

	<regular-table></regular-table>

	<script>

	const NUM_ROWS = 100;
	const NUM_DIR = 10;

	const COLUMN_NAMES = ['modified', 'kind', 'writable'];
	const DIR_NAMES = ['able', 'baker', 'charlie', 'dog', 'easy', 'fox', 'george', 'how', 'item', 'jig', 'king', 'love', 'mike', 'nan', 'oboe', 'peter', 'queen', 'roger', 'sugar', 'tare', 'uncle', 'victor', 'william', 'xray', 'yoke', 'zebra'];
	const date_formatter = new Intl.DateTimeFormat("en-us");

	const _contents_cache = new Map();
	function getContents(path, expand) {
	// infinite recursive mock contents
	let contents;
	if (_contents_cache.has(path)) {
	contents = _contents_cache.get(path);
	} else {
	contents = {
	path,
	modified: new Date(126060*1000),
	kind: 'dir',
	writable: false};
	_contents_cache.set(path, contents);
	}

	if (!expand \|\| 'contents' in contents) {
	return contents;
	}

	contents.contents = []
	for (let i = 0; i < NUM_ROWS; i ++) {
	const subcontents = {
	path: [...path, i < NUM_DIR ? `${DIR_NAMES[i]}/` : `file_${i - NUM_DIR}.txt`],
	modified: new Date(contents.modified.getTime() + 2460601000(365 + i)),
	kind: i < NUM_DIR ? 'dir' : 'text',
	writable: false,
	};

	_contents_cache.set(subcontents.path, subcontents);
	contents.contents.push(subcontents);
	}

	return contents;
	}

	let config = {
	column_pivots: [],
	row_pivots: ['path'],
	}

	let rows = getContents([], true).contents;

	// for tree support
	async function collapse(rix) {
	const contents = getContents(rows[rix].path);

	// splice out the contents of the collapsed node and any expanded subnodes
	let npop = contents.contents.length;
	let check_ix = rix + 1 + npop;
	while (rows[check_ix++].path.length > contents.path.length) {
	npop++;
	}

	rows.splice(rix + 1, npop);
	}

	async function expand(rix) {
	const contents = getContents(rows[rix].path, true);
	rows.splice(rix + 1, 0, ...contents.contents);
	}

	async function file_browser_model(start_col, start_row, end_col, end_row) {
	const data = [];
	for (let cix = start_col; cix < end_col; cix ++) {
	const name = COLUMN_NAMES[cix];
	data.push(rows.slice(start_row, end_row).map(c => {
	return name === 'modified' ? date_formatter.format(c[name]) : c[name];
	}));
	}

	return {
	num_rows: rows.length,
	num_columns: COLUMN_NAMES.length,
	column_indices: COLUMN_NAMES.map(col => [col]),
	row_indices: rows.slice(start_row, end_row).map(c => c['path']),
	data,
	__collapse: collapse,
	__config: config,
	__expand: expand,
	};
	}

	const table = document.getElementsByTagName('regular-table')[0];
	table.setDataModel(file_browser_model);
	</script>

	</body>

	</html>