Styling the components?

[bfovez]

Hello,

Many thanks and congrats for this tremendous library! It will definitely be my reference for my svelte project.

My question is the following: how we can custom-style the component like Database, Search, and so on?

I noticed in the source code that there were some styles applied. I would like to avoid replicating the source code just to change some styles.

For example, I created a +page.svelte with the basic example from the doc:

<script lang="ts">
	import myData from './data'
	import { DataHandler, Datatable, Th, ThFilter } from '@vincjo/datatables'

	const handler = new DataHandler(myData, { rowsPerPage: 10 })
	const rows = handler.getRows()
</script>

<Datatable {handler} class="table-container">
	<table class="table table-interactive table-hover table-compact">
		<thead>
			<tr>
				<Th {handler} orderBy="first_name">First Name</Th>
				<Th {handler} orderBy="last_name">Last Name</Th>
				<Th {handler} orderBy="email">Email</Th>
			</tr>
			<tr>
				<ThFilter {handler} filterBy="first_name" />
				<ThFilter {handler} filterBy="last_name" />
				<ThFilter {handler} filterBy="email" />
			</tr>
		</thead>
		<tbody>
			{#each $rows as row}
				<tr>
					<td>{row.first_name}</td>
					<td>{row.last_name}</td>
					<td>{row.email}</td>
				</tr>
			{/each}
		</tbody>
	</table>
</Datatable>

<style>
	thead {
		background: #fff;
	}
	tbody td {
		border: 1px solid #f5f5f5;
		padding: 4px 20px;
	}
	tbody tr {
		transition: all, 0.2s;
	}
	tbody tr:hover {
		background: #f5f5f5;
	}
</style>

Here is the result with the Skeleton Wintry theme activated:

I would like to style the search box, the show entries dropdown, the paginator, and so on.

Is there a way to achieve this without replicating the source code in my own components?

Thank you in advance for your answer.

Bertrand

[vincjo]

Hello Bertrand,
Thanks for your feedback

Unfortunately, this is not currently possible, as nothing has been thought of to facilitate the use of these components.

The principle was to provide minimal code with a "presentable" rendering as an example but not for direct implementation.

So there's still a lot to improve on the component side. Possibly, a first iteration would be to provide components without the style tag as you suggest

[bfovez]

Thank you. I'll manage to craft these components with Skeleton.dev, and I'll share them once done.