Even with sortable: true, the ability to sort isn't available even when scrollY is false

Thanks for the easy-to-use control. I have been trying to integrate the control with a style manager, but had limited success so far:

After attempting a few elegant solutions, such as specifying the background-color and similar properties targeting <Datatable class="themed-datatable" using the custom style themed-datatable which specifies background-color (the normal way of styling) I gave up. Nothing could change the background or borders.

So I resorted to the bad :global(*) selector in order to theme any thing at all. This is what you can see in the screenshot above.

  :global(*) {
    background-color: var(--theme-colors-background, initial);
    border-bottom: var(--theme-colors-background-contrast, initial);
  }

I remain unable to theme certain elements because of the following nasty class .css that I cannot overwrite.

CSS is not my daily bread and butter, so I might be missing something obvious. Any suggestions on how I can get the component themed?

Thanks in advance. Cheers!

The rendered markup for sorting the columns are placed in a section element with a thead.

I've run the rendered markup through https://validator.w3.org/ and the structure is deemed invalid.

Is there any reason why the thead is not apart of the table?

Current structure

<article class="dt-table">
  <section>
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
  </section>
  <table> ... </table>
</article>

Proposed solution

<article class="dt-table">
 <table>
    <thead>
      <tr>
        <th><button>...</button></th>
      </tr>
    </thead>
    <tbody>...</tbody>
 </table>  
</article>

Alternatively, if you need to keep the header and columns seperate you can emulate table cell styling with display: table.

<article class="dt-table">
  <section>
    <div class="thead">
      <div class="tr">
        <div class="th><button>column title</button></div>
      </div>
    </div>
  </section>
  <table> ... </table>
</article>

<style>
  .thead { display: table; }
  .tr { display: table-row; }
  .th { display: table-cell; }
</style>

How do i set width for individual columns?
and also how do i set alternating row color?

My table height gets rendered to height: 88px; no matter how many rows I have and therefore is unusable as can be seen in the screenshot.

I compared the css styling of https://vincjo.fr/svelte-simple-datatables/#/demo with the table in my project and it seems that in your example the height calculation for the article wrapper works, it is <article class="dt-table" style="height: 344px; overflow-x: auto;">

Edit (August-30@4:26 PM UTC)
I've managed to resolve this issue by installing the repository build directory using npm install vincjo/svelte-simple-datatables.

Hi,

I've tried this library, and it's great, but I've tried using it with SvelteKit and it's not working due to the following error Identifier 'global' has already been declared:

I've found an issue #29 and a PR #30 addressing this bug, but I'm using the latest npm version and I got this bug, I've installed the library as a dev-dependency as instructed.

Any help would be appreciated.

Thanks,

I have unexpected UI result when using it with CRUD operation. The behavior is on the column both header and data side. Its shows differently when I have a data (a lot of data) or initial data and when I have empty data, then I add it manually.

Is the website offline?

Greetings! First of all, thank you for this library. Nice job.
There's one issue I'd like to get rid of: looks like redraw function works fine if the table is growing, but not vice versa.
Steps to reproduce:

• page loaded with 1000px width, table fits fine
• increase page width to 1100px, table is expanded respectively and fits fine
• decrease page width back to 1000px, table doesn't fit and we can see a horizontal scrollbar
  See the GIF, please
  

I'm happy to donate. This is a great lib, I really looking forward to have this feature..

If i set the following style for my td

td { text-align: center; padding: 4px 2px; }

the component is rerendering and goes on expading overflowing the page width

Hi Vincjo,

I am not sure if I did something wrong using the component or setting up the css, but the sticky header cells width don't align with the original table columns width. I have tried changing the width by forcing them to be identical in columns.redraw, but they just won't line up. What's the right way to do it ?

rgds
Pang

I can't seem to toggle dark mode.

If I disable css, and put the css from here: https://github.com/vincjo/svelte-simple-datatables/blob/master/example/public/datatable.dark.css

Into my global css (as I can't put it in my component, because the css isn't called from the component), it breaks a lot of the lay-out.

Is there a simple toggle? Am I stupid and implementing it wrong? The help file for the css isn't very helpful.

it looks to me like this only supports one table at a time, right?

I've implemented the ability to filter the underlying data of the table, but if the user navigates to page 2 (for example) then filters the data it stays on page 2 even when there's not enough data for 2 pages.

Is there any way to reset the page? Maybe an exported variable I can change after filtering?

would be so, so nice!

btw: the search is so elegantly done <3

Hey, is there a way to programmatically clear the search input and table results? I'm wanting to add a "clear (x)" icon to the search input (and filter inputs) as well as clear the data when the Escape key is pressed.

It would also be great to be able to change the rows per page via a dropdown. Any quick ideas on how to do that?

It would be nice to have a selector to choose how many rows are displayed in the table as other libraries do.

if i have column filters: true and scrollY:true, columnFilters work as intended. However, as soon as I set scrollY: false; column filters no long show/render.

Is it possible to re-apply any column sorting applied should the underlying data be changed? I'm applying custom filtering to the bound data which is returned via ajax. The returned data isn't necessarily ordered as per the applied column sorting.

Just installed v0.2.1 and I get the following error, even when creating a brand new repo with nothing else

500
Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at Proxy.each (C:\Code\jummal\node_modules\svelte\internal\index.js:1710:31)
    at Object.default (SavedValues.svelte:37:10)
    at Datatable.svelte:48:15
    at Object.$$render (C:\Code\jummal\node_modules\svelte\internal\index.js:1745:22)
    at eval (/src/components/SavedValues.svelte:117:106)
    at Object.$$render (C:\Code\jummal\node_modules\svelte\internal\index.js:1745:22)
    at eval (/src/routes/index.svelte:23:90)
    at Object.$$render (C:\Code\jummal\node_modules\svelte\internal\index.js:1745:22)
    at Object.default (root.svelte:43:47)
    at eval (/.svelte-kit/runtime/components/layout.svelte:8:41)

EDIT:

I tried using the exact examples from the docs:

<script>
	import { Datatable } from 'svelte-simple-datatables';
	const settings = { columnFilter: true };
	let rows;
	let data = [
		{ id: 1, first_name: 'Tobie', last_name: 'Vint', email: '[email protected]' },
		{ id: 2, first_name: 'Zacharias', last_name: 'Cerman', email: '[email protected]' },
		{ id: 3, first_name: 'Gerianna', last_name: 'Bunn', email: '[email protected]' },
		{ id: 4, first_name: 'Bee', last_name: 'Saurin', email: '[email protected]' },
		{ id: 5, first_name: 'Meyer', last_name: 'Garnul', email: '[email protected]' },
		{ id: 6, first_name: 'Frederich', last_name: 'Benley', email: '[email protected]' },
		{ id: 7, first_name: 'Becki', last_name: 'Criag', email: '[email protected]' },
		{ id: 8, first_name: 'Nichols', last_name: 'Risom', email: '[email protected]' },
		{ id: 9, first_name: 'Ron', last_name: 'Menendes', email: '[email protected]' },
		{ id: 10, first_name: 'Thane', last_name: 'Gammill', email: '[email protected]' },
		{ id: 11, first_name: 'Ramonda', last_name: 'Yakobowitch', email: '[email protected]' },
		{
			id: 12,
			first_name: 'Rosalynd',
			last_name: 'Connechie',
			email: '[email protected]'
		},
		{ id: 13, first_name: 'Vinny', last_name: 'Hissett', email: '[email protected]' },
		{ id: 14, first_name: 'Mylo', last_name: 'Tarbath', email: '[email protected]' }
	];
</script>

<Datatable {settings} {data} bind:dataRows={rows}>
	<thead>
		<th data-key="id">ID</th>
		<th data-key="first_name">First Name</th>
		<th data-key="last_name">Last Name</th>
		<th data-key="email">Email</th>
	</thead>
	<tbody>
		{#if rows}
			{#each $rows as row}
				<tr>
					<td>{row.id}</td>
					<td>{row.first_name}</td>
					<td>{row.last_name}</td>
					<td>{row.email}</td>
				</tr>
			{/each}
		{/if}
	</tbody>
</Datatable>

<style>
	th:first-child {
		width: 72px;
	}
	td {
		text-align: center;
		padding: 4px 0;
	}
</style>

Hello,

Currently column filter is only possible as text input field.
I'm trying to insert select/option input field to make a filtering. But, I notice that this select field will not be shown in the header (thead).

Is there any way to inject this HTML input to the header of the table? This below what I'm trying to achieve.

  <thead>
      <tr>
          <th data-key="houseID">ID Pelanggan</th>
          <th data-key="name">Nama</th>
      </tr>
      <tr>
          <th>
              <select id="houseIDFilter">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
              </select>
          </th>
          <th>
              <input type="text" id="nameFilter" />
          </th>
      </tr>
  </thead>

Thank you

Hi Vincjo,

It happened to me that if I wrap the datatable component with a container like a div element, the datable wasn't rendered with the x-axis scroll bar. The logic that displays the x-scroll bar is in datatable.resize():
if (size.parentWidth * size.width < document.querySelector('section.datatable table').offsetWidth) {
tableContainer.style.overflowX = 'auto'
}
From the browser developer tool element tab, it's obvious that the parent width was less than the table width. I did some code tracing, it seems when the datatable.resize was called, the parent width was indeed larger than the table width, and the logic that changed the table width was in columns.draw, which was invoked in stickyheader onMount handler. Even though stickyheader onMount was called before datatable onMount (where the datatable.resize was done), the columns.draw in stickyheader was done with setTimeout set to 50ms, which means by the time columns.draw was run, the code that determines if x-scroll bar should be shown has already happened.

Could you kindly take a look if my observation is correct ? and if so, what's the recommended fix ?

$: pagesTotal = Math.ceil($rowsCount / $options.rowsPerPage);
$: start = $pageNumber * $options.rowsPerPage - $options.rowsPerPage + 1
$: end = Math.min($pageNumber * $options.rowsPerPage, $rowsCount)
$: rows = $rowsCount
$: info = $options.labels.info
		.replace('{rowsPerPage}', `<b>${$options.rowsPerPage}</b>`)
		.replace('{pageNumber}', `<b>${$pageNumber}</b>`)
		.replace('{pagesTotal}', `<b>${pagesTotal}</b>`)
		.replace('{start}', `<b>${start}</b>`)
		.replace('{end}', `<b>${end}</b>`)
		.replace('{rows}', `<b>${rows}</b>`)

so that way we could set this in settings:

labels: {
    [...]
   info: 'Page {pageNumber} of {pagesTotal} ({rowsPerPage} rows per page)',
}

I have an issue with the width of the datable. The action row is usualy hidden and the horizontal scroll is also not avialble.

when i load the grid by pressing F5 all works fine

when i navigate to the page through links. NOTE there are no horizontal scroll and the action column is hidden/missing

const settings = {
    sortable: true,
    pagination: true,
    rowPerPage: 20,
    noRows: "No data found",
    columnFilter: true,
};

let data= [];

onMount(async () => {
    data= await  dataService.getAll();
    
});

<Datatable {settings} data={data}>

id
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Column 1
Actions


{#each $rows as row}

{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}
{row?.Column1}

<button
on:click={() => {
handleClick(row?.id);
}}
class="rounded-lg px-4 py-2 bg-blue-500 text-blue-100"
>View Details


{/each}

Would it be possible to have a setting to disable CSS? For example I'd like complete control over the styling (borders, margin, height/width, etc), but not any CSS that's required for functionality, like layout and positioning.

When trying to remove the table programatically such as wrapping in if statement, it throws error Cannot read property 'c' of undefined

Here's a codesandbox link to reproduce this issue

This error is thrown when using Svelte Kit:

21:24:03 [vite] Error when evaluating SSR module /node_modules/svelte-simple-datatables/src/stores/filters.js:
SyntaxError: Identifier 'global' has already been declared
    at new Function (<anonymous>)
    at instantiateModule (F:\Projetos HDD\desafio-desenvolvedor-frontend\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68197:9)
Identifier 'global' has already been declared
SyntaxError: Identifier 'global' has already been declared
    at new Function (<anonymous>)
    at instantiateModule (F:\Projetos HDD\desafio-desenvolvedor-frontend\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68197:9)
21:24:03 [vite] Error when evaluating SSR module /node_modules/svelte-simple-datatables/src/stores/filters.js:
SyntaxError: Identifier 'global' has already been declared
    at new Function (<anonymous>)
    at instantiateModule (F:\Projetos HDD\desafio-desenvolvedor-frontend\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68197:9) (x2)
21:24:03 [vite] Error when evaluating SSR module /node_modules/svelte-simple-datatables/src/stores/filters.js:
SyntaxError: Identifier 'global' has already been declared
    at new Function (<anonymous>)
    at instantiateModule (F:\Projetos HDD\desafio-desenvolvedor-frontend\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68197:9) (x3)
21:24:03 [vite] Error when evaluating SSR module /node_modules/svelte-simple-datatables/src/stores/filters.js:
SyntaxError: Identifier 'global' has already been declared
    at new Function (<anonymous>)
    at instantiateModule (F:\Projetos HDD\desafio-desenvolvedor-frontend\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68197:9) (x4)
21:24:03 [vite] Error when evaluating SSR module /node_modules/svelte-simple-datatables/src/stores/filters.js:
SyntaxError: Identifier 'global' has already been declared
    at new Function (<anonymous>)
    at instantiateModule (F:\Projetos HDD\desafio-desenvolvedor-frontend\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68197:9) (x5)
21:24:03 [vite] Error when evaluating SSR module /node_modules/svelte-simple-datatables/src/stores/filters.js:
SyntaxError: Identifier 'global' has already been declared
    at new Function (<anonymous>)
    at instantiateModule (F:\Projetos HDD\desafio-desenvolvedor-frontend\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68197:9) (x6)
21:24:03 [vite] Error when evaluating SSR module /node_modules/svelte-simple-datatables/src/stores/filters.js:
SyntaxError: Identifier 'global' has already been declared
    at new Function (<anonymous>)
    at instantiateModule (F:\Projetos HDD\desafio-desenvolvedor-frontend\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68197:9) (x7)
21:24:03 [vite] Error when evaluating SSR module /node_modules/svelte-simple-datatables/src/stores/filters.js:
SyntaxError: Identifier 'global' has already been declared
    at new Function (<anonymous>)
    at instantiateModule (F:\Projetos HDD\desafio-desenvolvedor-frontend\node_modules\vite\dist\node\chunks\dep-e9a16784.js:68197:9) (x8)

Apparently Svelte Kit already uses the constant "global", but svelte-simple-datatables is trying to define it again in the last line of the file "node_modules/svelte-simple-datatables/src/stores/filters.js".

Is it possible to:

• "Expand" a row upon click
• Nest a table "component" within an "expanded" row
• Completely replace dataset loaded, and changes reflect on pagination
• Specific row styling upon predicate (on data load after pre-process)
• Override all possible styles

Any plan to add action buttons where a user could perform a action on selected row?

Currently when using svelte-simple-datatables in combination with Typescript, every row.<property> displays following error in the terminal when running svelte-check:

Error: Object is of type 'unknown'. (ts)
        <td>
          <ReportStatus reportStatus="{row.status}" />
        </td>

It would be great to have type definitions or at least these errors silenced, thank you!

Is there a way to save filters that are applied and then apply the saved filters again to the datatable?

Hi Vincjo,

It seemed the app version 3.29.7 made some changes to accommodate multiple datatables included in one web page ?
I saw 2 problems.
(1) The on:click event listener for the filter header cell does not provide the 3rd parameter, which is the id of the datatable, the 3rd parameter was added in columns.filter function.

(2) In columns.filter, the pageNumber.set function is missing the second parameter, which is also the id of the datatable.

Hi !
How can i set a default sort 'desc' on initialization ?
Thanks

This is a great library but it overflow the layout on my screen. I'm not a CSS wizard either, just I love the grid layout that's it.

Hi,
I really like the datatable, but i think it would be great if there are some forwarded events like pagination change, or even better export a prop to bind to the page number. Same thing with search functionalty.

Or is there any other way to handle async data? As far as i can tell i have to get all of the data from the server at once, because I dont know when to load the data for the next page.

Hello;

When will the Server Side feature be activated?

Waiting Impatiently

Hi, I was wondering what's the solution for directly using data that exists in a store?

I'm trying to build a favorites list, which would need to dynamically add/remove items from the data array and auto update the table

Here are the relevant pieces of code:

Datatable component

<div>
<Datatable {settings} {$data} bind:dataRows={rows}>
(...)
</Datatable>
</div>

Store + data:

import { writable } from 'svelte/store';

export const data = writable([
	{ id: 1, first_name: 'Tobie', last_name: 'Vint', email: '[email protected]' },
	{ id: 2, first_name: 'Zacharias', last_name: 'Cerman', email: '[email protected]' },
	{ id: 3, first_name: 'Gerianna', last_name: 'Bunn', email: '[email protected]' },
	{ id: 4, first_name: 'Bee', last_name: 'Saurin', email: '[email protected]' },
	{ id: 5, first_name: 'Meyer', last_name: 'Garnul', email: '[email protected]' },
	{ id: 6, first_name: 'Frederich', last_name: 'Benley', email: '[email protected]' },
	{ id: 7, first_name: 'Becki', last_name: 'Criag', email: '[email protected]' },
	{ id: 8, first_name: 'Nichols', last_name: 'Risom', email: '[email protected]' },
	{ id: 9, first_name: 'Ron', last_name: 'Menendes', email: '[email protected]' },
	{ id: 10, first_name: 'Thane', last_name: 'Gammill', email: '[email protected]' },
	{ id: 11, first_name: 'Ramonda', last_name: 'Yakobowitch', email: '[email protected]' }
]);

Trying this gives the following errors:

<Datatable> was created with unknown prop '$data':

Thank you :)

Typo on demo page

Datatable default settings
https://vincjo.fr/svelte-simple-datatables/#/settings

miss . between 'labels' and 'blocks'

const settings = {
    sortable: true,
    pagination: true,
    scrollY: true,
    rowPerPage: 50,
    columnFilter: false,
    css: true,
    labels: {
        search: 'Search...',    // search input placeholer
        filter: 'Filter',       // filter inputs placeholder
        noRows: 'No entries to found',
        info: 'Showing {start} to {end} of {rows} entries',
        previous: 'Previous',
        next: 'Next',       
    } // <-------------------- there
    blocks: {
        searchInput: true, 
        paginationButtons: true,
        paginationRowCount: true,
    }
}    

I would like the datatable to act more like a standard table, so no floating header or size constraints based on the container. Can this be added?

is it possible to select a row and perform actions, and change alternate colors of the rows?

After installing and following the setup guide carefully i still get ERROR below :: What am i not doing right ??

Datatable is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

Discussed in #70

If table only has 1 entry, the data get hidden due to height. Of course, the table may need to contain for example 11 columns and IDs like "7d440900-9017-4563-e6ea-8a2998b0a18a"

If you can fix this out, It would be great..