runes
<script>
import { readable } from 'svelte/store';
import { createTable, Subscribe, Render } from 'svelte-headless-table';
import { addHiddenColumns } from 'svelte-headless-table/plugins';
import { createSamples } from './createSamples';
const data = readable(createSamples(30));
const table = createTable(data, {
hideCols: addHiddenColumns(),
});
const columns = table.createColumns([
table.group({
header: 'Name',
columns: [
table.column({
header: 'First Name',
accessor: 'firstName',
}),
table.column({
header: 'Last Name',
accessor: 'lastName',
}),
],
}),
table.group({
header: 'Info',
columns: [
table.column({
header: 'Age',
accessor: 'age',
}),
table.column({
header: 'Status',
accessor: 'status',
}),
table.column({
header: 'Visits',
accessor: 'visits',
}),
table.column({
header: 'Profile Progress',
accessor: 'progress',
}),
],
}),
]);
const { flatColumns, headerRows, rows, tableAttrs, tableBodyAttrs, pluginStates } = table.createViewModel(columns);
const { hiddenColumnIds } = pluginStates.hideCols;
const ids = flatColumns.map((c) => c.id);
let hideForId = Object.fromEntries(ids.map((id) => [id, false]));
$: $hiddenColumnIds = Object.entries(hideForId)
.filter(([, hide]) => hide)
.map(([id]) => id);
</script>
<pre>$hiddenColumnIds = {JSON.stringify($hiddenColumnIds, null, 2)}</pre>
{#each ids as id}
<div>
<input id="hide-{id}" type="checkbox" bind:checked={hideForId[id]} />
<label for="hide-{id}">{id}</label>
</div>
{/each}
<table {...$tableAttrs}>
<thead>
{#each $headerRows as headerRow (headerRow.id)}
<Subscribe rowAttrs={headerRow.attrs()} let:rowAttrs>
<tr {...rowAttrs}>
{#each headerRow.cells as cell (cell.id)}
<Subscribe attrs={cell.attrs()} let:attrs>
<th {...attrs}>
<Render of={cell.render()} />
</th>
</Subscribe>
{/each}
</tr>
</Subscribe>
{/each}
</thead>
<tbody {...$tableBodyAttrs}>
{#each $rows as row (row.id)}
<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
<tr {...rowAttrs}>
{#each row.cells as cell (cell.id)}
<Subscribe attrs={cell.attrs()} let:attrs>
<td {...attrs}>
<Render of={cell.render()} />
</td>
</Subscribe>
{/each}
</tr>
</Subscribe>
{/each}
</tbody>
</table>
<style>
div {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
input {
margin: 0;
}
table {
border-spacing: 0;
border-top: 1px solid black;
border-left: 1px solid black;
}
th, td {
border-bottom: 1px solid black;
border-right: 1px solid black;
padding: 0.5rem;
}
</style>
/* App.svelte generated by Svelte v3.48.0 */
import {
SvelteComponent,
append,
append_styles,
assign,
attr,
check_outros,
component_subscribe,
create_component,
destroy_component,
destroy_each,
detach,
element,
empty,
get_spread_update,
group_outros,
init,
insert,
listen,
mount_component,
outro_and_destroy_block,
safe_not_equal,
set_attributes,
set_data,
set_store_value,
space,
text,
toggle_class,
transition_in,
transition_out,
update_keyed_each
} from "svelte/internal";
import { readable } from 'svelte/store';
import { createTable, Subscribe, Render } from 'svelte-headless-table';
import { addHiddenColumns } from 'svelte-headless-table/plugins';
import { createSamples } from './createSamples';
function add_css(target) {
append_styles(target, "svelte-1o4ueae", "div.svelte-1o4ueae{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}input.svelte-1o4ueae{margin:0}table.svelte-1o4ueae{border-spacing:0;border-top:1px solid black;border-left:1px solid black}th.svelte-1o4ueae,td.svelte-1o4ueae{border-bottom:1px solid black;border-right:1px solid black;padding:0.5rem}");
}
function get_each_context(ctx, list, i) {
const child_ctx = ctx.slice();
child_ctx[18] = list[i];
return child_ctx;
}
function get_each_context_1(ctx, list, i) {
const child_ctx = ctx.slice();
child_ctx[22] = list[i];
return child_ctx;
}
function get_each_context_2(ctx, list, i) {
const child_ctx = ctx.slice();
child_ctx[26] = list[i];
return child_ctx;
}
function get_each_context_3(ctx, list, i) {
const child_ctx = ctx.slice();
child_ctx[22] = list[i];
return child_ctx;
}
function get_each_context_4(ctx, list, i) {
const child_ctx = ctx.slice();
child_ctx[31] = list[i];
child_ctx[32] = list;
child_ctx[33] = i;
return child_ctx;
}
// (61:0) {#each ids as id}
function create_each_block_4(ctx) {
let div;
let input;
let input_id_value;
let t0;
let label;
let t1_value = /*id*/ ctx[31] + "";
let t1;
let label_for_value;
let mounted;
let dispose;
function input_change_handler() {
/*input_change_handler*/ ctx[12].call(input, /*id*/ ctx[31]);
div.svelte-1o4ueae{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}input.svelte-1o4ueae{margin:0}table.svelte-1o4ueae{border-spacing:0;border-top:1px solid black;border-left:1px solid black}th.svelte-1o4ueae,td.svelte-1o4ueae{border-bottom:1px solid black;border-right:1px solid black;padding:0.5rem}
- {
-
-
- {
- type: "Script"
- start: 0
- end: 1537
- context: "default"
-
} - module:
}
