Skip to content

Commit d4c0824

Browse files
zxyctnzxyctn
committed
#115 Add option to show/hide columns menu
1 parent e6e6b2b commit d4c0824

File tree

6 files changed

+79
-53
lines changed

6 files changed

+79
-53
lines changed

‎src/lib/components/Table/TableContent.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
id: tableId, // Unique table ID
4949
data, // Data store
5050
columns, // Column configuration
51+
showColumnsMenu = false, // Whether to display the columns menu
5152
resizable = 'none', // Resizability config
5253
height = null, // Table height
5354
rowHeight = null, // Row height
@@ -611,7 +612,7 @@
611612
><Fa icon={faDownload} /> Export as CSV</button
612613
>
613614
{/if}
614-
{#if shownColumns.length > 0}
615+
{#if showColumnsMenu && shownColumns.length > 0}
615616
<ColumnsMenu bind:columns={shownColumns} {tableId} />
616617
{/if}
617618
</div>

‎src/lib/models/Models.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ export interface TableConfig<T> {
117117
id: string;
118118
data: Writable<T[]>;
119119
resizable?: 'none' | 'rows' | 'columns' | 'both'; // none by default
120+
showColumnsMenu?: boolean; // false by default
120121
toggle?: boolean; // false by default
121122
search?: boolean; // true by default
122123
fitToScreen?: boolean; // true by default

‎src/routes/components/table/data/codeBlocks.ts‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -203,15 +203,19 @@ export interface TableConfig<T> {
203203
id: string;
204204
data: Writable<T[]>;
205205
resizable?: 'rows' | 'columns' | 'both'; // none by default
206+
showColumnsMenu?: boolean; // false by default
206207
toggle?: boolean; // false by default
208+
search?: boolean; // true by default
207209
fitToScreen?: boolean; // true by default
208210
height?: null | number; // null by default
209211
rowHeight?: number; // auto by default
210212
columns?: Columns;
211213
exportable?: boolean; // false by default
212-
pageSizes?: number[]; // [5, 10, 15, 20] by default
214+
pageSizes?: number[]; // [5, 10, 20, 50, 100] by default
213215
defaultPageSize?: number; // 10 by default
214216
optionsComponent?: typeof SvelteComponent;
217+
218+
server?: ServerConfig;
215219
}`;
216220

217221
export const columnsTypeCode = `
@@ -332,6 +336,7 @@ export const websitesHTML = `
332336
const websitesConfig: TableConfig<Website> = {
333337
id: 'websites',
334338
data: websitesStore,
339+
showColumnsMenu: true,
335340
toggle: true,
336341
fitToScreen: false,
337342
columns: {
@@ -707,13 +712,13 @@ export const serverSideTableHTML = `
707712
708713
const serverTableConfig: TableConfig<ServerTableType> = {
709714
id: 'serverTable', // a unique id for the table
710-
entityId: 3, // dataset ID
711-
versionId: -1, // vesion ID
712715
data: tableStore, // store to hold and retrieve data
713-
serverSide: true, // serverSide needs to be set to true
714-
// URL for the table to be fetched from
715-
URL: 'https://dev.bexis2.uni-jena.de/api/datatable/',
716-
token: '<your_token>' // API token to access the datasets
716+
server: {
717+
// URL for the table to be fetched from
718+
baseUrl: 'https://dev.bexis2.uni-jena.de/api/datatable/',
719+
entityId: 1, // dataset ID
720+
versionId: -1, // version ID
721+
}
717722
};
718723
</script>
719724

‎src/routes/components/table/docs/TableConfigDocs.svelte‎

Lines changed: 60 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
>
2020
<div class="italic div">Underlined attributes are <strong>required</strong>.</div>
2121
<div data-popup="popupClickTableConfig">
22-
<CodeBlock language="ts" code={tableConfigTypeCode} />
22+
<CodeBlock language="ts" code={tableConfigTypeCode} />
2323
</div>
2424
</div>
2525

@@ -42,32 +42,31 @@
4242

4343
<p class="text-xl pl-10">
4444
A writable store of the type <code
45-
class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500">T[]</code
45+
class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
46+
>T[]</code
4647
>. Any changes in the store will be reflected in the table.
4748
</p>
4849
</div>
4950

5051
<div class="items-center">
5152
<div class="flex gap-2">
52-
<div class="italic">search:</div>
53-
<div class="font-bold">boolean</div>
53+
<div class="italic">resizable:</div>
54+
<div class="font-bold"><i>"rows"</i>, <i>"columns"</i> or <i>"both"</i></div>
5455
</div>
5556

5657
<p class="text-xl pl-10">
57-
Whether the table should have a search bar. <code
58-
class="!text-xl bg-blue-100 dark:bg-blue-600/30 rounded-md p-0.5 text-blue-500">true</code
59-
> by default.
58+
Whether rows, columns or both should be resizable. Not resizable by default.
6059
</p>
6160
</div>
6261

6362
<div class="items-center">
6463
<div class="flex gap-2">
65-
<div class="italic">exportable:</div>
64+
<div class="italic">showColumnsMenu:</div>
6665
<div class="font-bold">boolean</div>
6766
</div>
6867

6968
<p class="text-xl pl-10">
70-
Whether the table should be exportable to CSV. <code
69+
Whether the show/hide columns menu should be visible. <code
7170
class="!text-xl bg-red-100 dark:bg-red-400/30 rounded-md p-0.5 text-red-500">false</code
7271
> by default.
7372
</p>
@@ -80,35 +79,26 @@
8079
</div>
8180

8281
<p class="text-xl pl-10">
83-
Whether the <code class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
82+
Whether the <code
83+
class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
8484
>fitToScreen</code
8585
>
8686
toggle should be visible.
87-
<code class="!text-xl bg-red-100 dark:bg-red-400/30 rounded-md p-0.5 text-red-500">false</code> by default.
88-
</p>
89-
</div>
90-
91-
<div class="items-center">
92-
<div class="flex gap-2">
93-
<div class="italic">resizable:</div>
94-
<div class="font-bold"><i>"rows"</i>, <i>"columns"</i> or <i>"both"</i></div>
95-
</div>
96-
97-
<p class="text-xl pl-10">
98-
Whether rows, columns or both should be resizable. Not resizable by default.
87+
<code class="!text-xl bg-red-100 dark:bg-red-400/30 rounded-md p-0.5 text-red-500">false</code
88+
> by default.
9989
</p>
10090
</div>
10191

10292
<div class="items-center">
10393
<div class="flex gap-2">
104-
<div class="italic">rowHeight:</div>
105-
<div class="font-bold">number</div>
94+
<div class="italic">search:</div>
95+
<div class="font-bold">boolean</div>
10696
</div>
10797

10898
<p class="text-xl pl-10">
109-
Sets height for the rows in pixels. If <code
110-
class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500">resizable</code
111-
> is set to "both" or "rows", this value can be interpreted as minimum height for the rows.
99+
Whether the table should have a search bar. <code
100+
class="!text-xl bg-blue-100 dark:bg-blue-600/30 rounded-md p-0.5 text-blue-500">true</code
101+
> by default.
112102
</p>
113103
</div>
114104

@@ -136,15 +126,43 @@
136126

137127
<div class="items-center">
138128
<div class="flex gap-2">
139-
<div class="italic">optionsComponent:</div>
140-
<div class="font-bold">{`SvelteComponent`}</div>
129+
<div class="italic">rowHeight:</div>
130+
<div class="font-bold">number</div>
141131
</div>
142132

143133
<p class="text-xl pl-10">
144-
Custom Svelte component to apply actions on a specific row. Table will not have an options
145-
column if no <code class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
146-
>optionsComponent</code
147-
> was provided.
134+
Sets height for the rows in pixels. If <code
135+
class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
136+
>resizable</code
137+
> is set to "both" or "rows", this value can be interpreted as minimum height for the rows.
138+
</p>
139+
</div>
140+
141+
<div class="items-center">
142+
<div class="flex gap-2">
143+
<div class="italic">columns:</div>
144+
<div class="font-bold">{`Columns`}</div>
145+
</div>
146+
147+
<p class="text-xl pl-10">
148+
An object with configuration for specific columns. <code
149+
class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
150+
>Columns</code
151+
>
152+
object is described below.
153+
</p>
154+
</div>
155+
156+
<div class="items-center">
157+
<div class="flex gap-2">
158+
<div class="italic">exportable:</div>
159+
<div class="font-bold">boolean</div>
160+
</div>
161+
162+
<p class="text-xl pl-10">
163+
Whether the table should be exportable to CSV. <code
164+
class="!text-xl bg-red-100 dark:bg-red-400/30 rounded-md p-0.5 text-red-500">false</code
165+
> by default.
148166
</p>
149167
</div>
150168

@@ -155,7 +173,8 @@
155173
</div>
156174

157175
<p class="text-xl pl-10">
158-
An array of page sizes to be used for the table. By default, page sizes are 5, 10, 20, 50, 100.
176+
An array of page sizes to be used for the table. By default, page sizes are 5, 10, 20, 50,
177+
100.
159178
</p>
160179
</div>
161180

@@ -173,15 +192,16 @@
173192

174193
<div class="items-center">
175194
<div class="flex gap-2">
176-
<div class="italic">columns:</div>
177-
<div class="font-bold">{`Columns`}</div>
195+
<div class="italic">optionsComponent:</div>
196+
<div class="font-bold">{`SvelteComponent`}</div>
178197
</div>
179198

180199
<p class="text-xl pl-10">
181-
An object with configuration for specific columns. <code
182-
class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500">Columns</code
183-
>
184-
object is described below.
200+
Custom Svelte component to apply actions on a specific row. Table will not have an options
201+
column if no <code
202+
class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
203+
>optionsComponent</code
204+
> was provided.
185205
</p>
186206
</div>
187207
</div>

‎src/routes/components/table/examples/TableServer.svelte‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,11 @@
2222
serverTableConfig = {
2323
id: 'serverTable', // a unique id for the table
2424
data: tableStore, // store to hold and retrieve data
25-
// URL for the table to be fetched from
26-
pageSizes: [10, 25, 50, 100],
27-
2825
server: {
26+
// URL for the table to be fetched from
2927
baseUrl: 'https://dev.bexis2.uni-jena.de/api/datatable/',
3028
entityId: 1, // dataset ID
31-
versionId: -1, // version ID
29+
versionId: -1 // version ID
3230
}
3331
};
3432
});

‎src/routes/components/table/examples/TableURLs.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
const websitesConfig: TableConfig<Website> = {
1111
id: 'websites',
1212
data: websitesStore,
13+
showColumnsMenu: true,
1314
toggle: true,
1415
fitToScreen: false,
1516
columns: {
@@ -31,7 +32,7 @@
3132
</script>
3233

3334
<div id="URLs">
34-
<CustomCodeContainer title="URLs" tabs={websitesTabs}>
35+
<CustomCodeContainer title="URLs (+ show columns menu)" tabs={websitesTabs}>
3536
<Table config={websitesConfig} />
3637
</CustomCodeContainer>
3738
</div>

0 commit comments

Comments
 (0)