Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Table #90

Merged
merged 3 commits into from
Jun 14, 2024
Merged

Table #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d84361f
Add configuration for hiding search bar
zxyctn Apr 24, 2024
73071ee
Add an action dispatcher prop for the renderComponent
zxyctn Jun 14, 2024
8123985
Add unique IDs for reset and submit buttons for Search
zxyctn Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions src/lib/components/Table/TableContent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
optionsComponent, // Custom component to render in the last column
defaultPageSize = 10, // Default page size - number of rows to display per page
toggle = false, // Whether to display the fitToScreen toggle
search = true, // Whether to display the search input
pageSizes = [5, 10, 15, 20], // Page sizes to display in the pagination component
fitToScreen = true, // Whether to fit the table to the screen,
exportable = false, // Whether to display the export button and enable export functionality
Expand Down Expand Up @@ -154,7 +155,7 @@
// Render the cell with the provided component, or use the toStringFn if provided, or just use the value
cell: ({ value, row }) => {
return renderComponent
? createRender(renderComponent, { value, row })
? createRender(renderComponent, { value, row, dispatchFn: actionDispatcher })
: toStringFn
? toStringFn(value)
: value;
Expand Down Expand Up @@ -319,8 +320,6 @@

// Format server columns to the client columns
if (response.columns !== undefined) {
console.log(response);

columns = convertServerColumns(response.columns, columns);

const clientCols = response.columns.reduce((acc, col) => {
Expand Down Expand Up @@ -369,7 +368,7 @@
{#if $data.length > 0 || (columns && Object.keys(columns).length > 0)}
<div class="table-container">
<!-- Enable the search filter if table is not empty -->
{#if !serverSide}
{#if !serverSide && search}
<form
class="flex gap-2"
on:submit|preventDefault={() => {
Expand All @@ -386,6 +385,7 @@
id="{tableId}-search"
/><button
type="reset"
id="{tableId}-searchReset"
class="absolute right-3 items-center"
on:click|preventDefault={() => {
searchValue = '';
Expand All @@ -396,6 +396,7 @@
</div>
<button
type="submit"
id="{tableId}-searchSubmit"
class="btn variant-filled-primary"
on:click|preventDefault={() => {
$filterValue = searchValue;
Expand All @@ -405,7 +406,7 @@
</form>
{/if}

<div class="flex justify-between items-center py-2 w-full">
<div class="flex justify-between items-center w-full {search && 'py-2'}">
<div>
<!-- Enable the fitToScreen toggle if toggle === true -->
{#if toggle}
Expand Down
1 change: 1 addition & 0 deletions src/lib/models/Models.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export interface TableConfig<T> {
data: Writable<T[]>;
resizable?: 'none' | 'rows' | 'columns' | 'both'; // none by default
toggle?: boolean; // false by default
search?: boolean; // true by default
fitToScreen?: boolean; // true by default
height?: null | number; // null by default
rowHeight?: number; // auto by default
Expand Down
13 changes: 13 additions & 0 deletions src/routes/components/table/docs/TableConfigDocs.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,19 @@
</p>
</div>

<div class="items-center">
<div class="flex gap-2">
<div class="italic">search:</div>
<div class="font-bold">boolean</div>
</div>

<p class="text-xl pl-10">
Whether the table should have a search bar. <code
class="!text-xl bg-blue-100 dark:bg-blue-600/30 rounded-md p-0.5 text-blue-500">true</code
> by default.
</p>
</div>

<div class="items-center">
<div class="flex gap-2">
<div class="italic">exportable:</div>
Expand Down