Datatable that supports controls in both footer and header

[Leftium]

I modified @vincjo's awesome datatable:

• Supported in header, footer, or both: search/rowsPerPage/rowCount/pagination
• Refactored out height and class:container in favor of automatic flexbox layout.
• Modified code: https://github.com/Leftium/bangtastic/blob/c6d5d6363b0b17e0dada08f96ba91517d1b2d593/src/lib/components/Datatable.svelte#L15-L108
• Original code:

  datatables/src/lib/local/Datatable.svelte

  Lines 16 to 76 in be9bced

  	const height = (search || rowsPerPage ? 48 : 8) + (rowCount || pagination ? 48 : 8)
  	handler.on('change', () => {
  	if (element) element.scrollTop = 0
  	})
  	</script>
  	<section bind:clientWidth class={$$props.class ?? ''}>
  	<header class:container={search || rowsPerPage}>
  	{#if search}
  	<Search {handler} />
  	{/if}
  	{#if rowsPerPage}
  	<RowsPerPage {handler} small={clientWidth < 600} />
  	{/if}
  	</header>
  	<article bind:this={element} style="height:calc(100% - {height}px)">
  	<slot />
  	</article>
  	<footer class:container={rowCount || pagination}>
  	{#if rowCount}
  	<RowCount {handler} small={clientWidth < 600} />
  	{/if}
  	{#if pagination}
  	<Pagination {handler} small={clientWidth < 600} />
  	{/if}
  	</footer>
  	</section>
  	<style>
  	section {
  	height: 100%;
  	}
  	section :global(table) {
  	border-collapse: separate;
  	border-spacing: 0;
  	width: 100%;
  	}
  	section :global(thead) {
  	position: sticky;
  	inset-block-start: 0;
  	z-index: 1;
  	}
  	header,
  	footer {
  	min-height: 8px;
  	padding: 0 16px;
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	}
  	header.container,
  	footer.container {
  	height: 48px;
  	}

[vincjo]

That's great, thx for sharing.
Flexbox layout will be added into the next major version