hamzus-ui 0.0.1

package/src/components/hamzus-ui/Table/ActionsBar.svelte

@@ -0,0 +1,174 @@
+<script>
+	// import
+	import { tableData } from './table';
+	import Input from '@hamzus-ui/Input/Input.svelte';
+	import Button from '@hamzus-ui/DropdownMenu/Button.svelte';
+	import * as DropdownMenu from '@hamzus-ui/DropdownMenu';
+	import { Content } from '.';
+	import Checkbox from '@hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte';
+	// props
+	export let tableId = null;
+
+	// local var
+	let globalSearch = $tableData[tableId].globalSearch;
+	$: updateGlobalSearch(globalSearch);
+    // life cycle
+
+	// function
+	function updateGlobalSearch(value) {
+		if (!$tableData || !$tableData[tableId] || $tableData[tableId].globalSearch === undefined) {
+			return;
+		}
+		tableData.update((actualValue) => {
+			actualValue[tableId].globalSearch = value;
+			return actualValue;
+		});
+		document.dispatchEvent(new Event('updateTableResult'));
+	}
+	function toggleHideColumn(columnName, value) {
+		tableData.update((actualValue) => {
+			for (let i = 0; i < actualValue[tableId].columns.length; i++) {
+				if (actualValue[tableId].columns[i].name === columnName) {
+					actualValue[tableId].columns[i].hidden = value;
+					break;
+				}
+			}
+
+			return actualValue;
+		});
+	}
+	function handleRemoveFilter(columnName) {
+		let foundedColumn = false;
+		tableData.update((actualValue) => {
+			for (let i = 0; i < actualValue[tableId].columns.length; i++) {
+				const element = actualValue[tableId].columns[i];
+				if (element.name === columnName) {
+					actualValue[tableId].columns[i].filter = "";
+					delete actualValue[tableId].filters[columnName];
+					foundedColumn = true;
+					break;
+				}
+			}
+
+			return actualValue;
+		});
+
+		if (foundedColumn) {
+			// emmetre un event
+			document.dispatchEvent(new Event('updateTableResult'));
+		}
+	}
+
+    function handleResetSettings() {
+        document.dispatchEvent(new Event('resetTableColumnsSettings'));
+    }
+</script>
+
+<div class="actions-bar">
+	<Input placeholder="recherche" bind:value={globalSearch}>
+		<svg
+			slot="endContent"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M11.5 21.75C5.85 21.75 1.25 17.15 1.25 11.5C1.25 5.85 5.85 1.25 11.5 1.25C17.15 1.25 21.75 5.85 21.75 11.5C21.75 17.15 17.15 21.75 11.5 21.75ZM11.5 2.75C6.67 2.75 2.75 6.68 2.75 11.5C2.75 16.32 6.67 20.25 11.5 20.25C16.33 20.25 20.25 16.32 20.25 11.5C20.25 6.68 16.33 2.75 11.5 2.75Z"
+				fill="#292D32"
+			/>
+			<path
+				d="M22.0004 22.7499C21.8104 22.7499 21.6204 22.6799 21.4704 22.5299L19.4704 20.5299C19.1804 20.2399 19.1804 19.7599 19.4704 19.4699C19.7604 19.1799 20.2404 19.1799 20.5304 19.4699L22.5304 21.4699C22.8204 21.7599 22.8204 22.2399 22.5304 22.5299C22.3804 22.6799 22.1904 22.7499 22.0004 22.7499Z"
+				fill="#292D32"
+			/>
+		</svg>
+	</Input>
+
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger slot="trigger">
+			<Button variant="secondary">
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M13 22.75H11C7.7 22.75 5.71 22.09 5.34 18.74C5.28 18.29 5.25 17.75 5.25 17V7C5.25 6.25 5.28 5.71 5.35 5.23C5.71 1.91 7.7 1.25 11 1.25H13C16.3 1.25 18.29 1.91 18.66 5.26C18.72 5.71 18.75 6.25 18.75 7V17C18.75 17.75 18.72 18.29 18.65 18.77C18.29 22.09 16.3 22.75 13 22.75ZM11 2.75C7.69 2.75 7.06 3.42 6.84 5.42C6.78 5.85 6.75 6.32 6.75 7V17C6.75 17.68 6.78 18.15 6.83 18.55C7.05 20.58 7.69 21.25 11 21.25H13C16.31 21.25 16.94 20.58 17.16 18.58C17.22 18.16 17.25 17.68 17.25 17V7C17.25 6.33 17.22 5.85 17.17 5.45C16.95 3.42 16.31 2.75 13 2.75H11Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M5.67 19.4201H5.33C2.24 19.4201 1.25 18.4301 1.25 15.3301V8.67008C1.25 5.57008 2.24 4.58008 5.33 4.58008H5.67C5.84 4.58008 5.98 4.58008 6.14 4.59008C6.35 4.60008 6.54 4.70008 6.67 4.87008C6.8 5.04008 6.86 5.24008 6.83 5.45008C6.78 5.85008 6.75 6.32008 6.75 7.00008V17.0001C6.75 17.6801 6.78 18.1501 6.83 18.5501C6.86 18.7601 6.8 18.9701 6.67 19.1301C6.54 19.2901 6.35 19.3901 6.14 19.4101C5.98 19.4201 5.84 19.4201 5.67 19.4201ZM5.27 6.08008C3.08 6.09008 2.75 6.44008 2.75 8.67008V15.3301C2.75 17.5601 3.08 17.9101 5.27 17.9201C5.26 17.6501 5.25 17.3501 5.25 17.0001V7.00008C5.25 6.65008 5.26 6.35008 5.27 6.08008Z"
+						fill="#292D32"
+					/>
+					<path
+						d="M18.6697 19.4201H18.3297C18.1597 19.4201 18.0197 19.4201 17.8597 19.4101C17.6497 19.4001 17.4597 19.3001 17.3297 19.1301C17.1997 18.9701 17.1397 18.7601 17.1697 18.5501C17.2297 18.1501 17.2497 17.6701 17.2497 17.0001V7.00008C17.2497 6.33008 17.2197 5.85008 17.1697 5.45008C17.1397 5.24008 17.1997 5.03008 17.3297 4.87008C17.4597 4.71008 17.6497 4.61008 17.8597 4.59008C18.0197 4.58008 18.1597 4.58008 18.3297 4.58008H18.6697C21.7597 4.58008 22.7497 5.57008 22.7497 8.67008V15.3301C22.7497 18.4301 21.7597 19.4201 18.6697 19.4201ZM18.7297 6.08008C18.7397 6.35008 18.7497 6.65008 18.7497 7.00008V17.0001C18.7497 17.3501 18.7397 17.6501 18.7297 17.9201C20.9197 17.9101 21.2497 17.5601 21.2497 15.3301V8.67008C21.2497 6.44008 20.9197 6.09008 18.7297 6.08008Z"
+						fill="#292D32"
+					/>
+				</svg>
+				<h4>colonnes</h4>
+			</Button>
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content slot="content">
+			<DropdownMenu.Label>Caché des colonnes</DropdownMenu.Label>
+			{#each $tableData[tableId].columns as column}
+				<DropdownMenu.Button style="justify-content:space-between;">
+					<h4>{column.label}</h4>
+					<Checkbox
+						checked={column.hidden}
+						onChange={(value) => {
+							toggleHideColumn(column.name, value);
+						}}
+					></Checkbox>
+				</DropdownMenu.Button>
+			{/each}
+            <DropdownMenu.Separator></DropdownMenu.Separator>
+
+            <DropdownMenu.Button onClick={handleResetSettings} style="justify-content:space-between;"><h4>paramètres par defauts</h4></DropdownMenu.Button>
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+
+	<!-- liste des filtres -->
+	{#if $tableData[tableId].filters}
+		{#each Object.entries($tableData[tableId].filters) as [key, filter]}
+			{@const column = $tableData[tableId].columns.filter((obj) => obj.name === key)[0]}
+
+			{#if column.searchChoices}
+				<Button
+					onClick={()=>{handleRemoveFilter(column.name)}}
+					style="border-radius:var(--radius-m);padding-left:3px;"
+					variant="outline"
+				>
+					<h4 class="filter-column">{column.label}</h4>
+					<h4>: {column.searchChoices.filter((obj) => obj.value === filter)[0].label}</h4>
+				</Button>
+			{:else}
+				<Button
+					onClick={()=>{handleRemoveFilter(column.name)}}
+					style="border-radius:var(--radius-m);padding-left:3px;"
+					variant="outline"
+				>
+					<h4 class="filter-column">{column.label}</h4>
+					<h4>: {filter}</h4>
+				</Button>
+			{/if}
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.actions-bar {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+		margin-bottom: var(--pad-m);
+	}
+
+	.filter-column {
+		background-color: var(--bg-2);
+		padding: 0px var(--pad-m);
+		border-radius: var(--radius-s);
+	}
+</style>

package/src/components/hamzus-ui/Table/Content.svelte

@@ -0,0 +1,68 @@
+<script>
+	// import
+	import { tableData } from './table';
+	// props
+	export let tableId = null;
+
+	// local var
+
+	// lifeTime component
+
+	// function
+</script>
+
+<div class="content">
+	{#each $tableData[tableId].rows as row}
+		<div class="row">
+			{#each Object.keys(row) as cellKey}
+				{@const column = $tableData[tableId].columns.filter((obj) => obj.name === cellKey)[0]}
+
+				{#if !column.hidden}
+					<div
+						class="cell"
+						style="--cell-width:{column.width ?? column.initialWidth}px;{column.skipLine === true
+							? 'white-space:nowrap;'
+							: ''}"
+					>   
+                        <!-- il se peut que ce soit un composant -->
+                        {#if typeof row[cellKey] === 'object'}
+                            <svelte:component this={row[cellKey].component} {...row[cellKey].props}></svelte:component>
+                        {:else}
+						    <h4>{row[cellKey]}</h4>
+                        {/if}
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+	}
+	.row {
+		display: flex;
+		border-bottom: 1px solid var(--stroke);
+        flex-shrink: 0;
+        min-width: max-content;
+        width: 100%;
+	}
+	.row:hover {
+		background-color: var(--bg-2);
+	}
+
+	.cell {
+		width: var(--cell-width);
+		padding: var(--pad-m);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		border-right: 1px solid var(--stroke);
+		flex-shrink: 0;
+	}
+	.cell > h4 {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+</style>

package/src/components/hamzus-ui/Table/Header.svelte

@@ -0,0 +1,268 @@
+<script>
+	// import
+	import { tableData } from './table';
+	import Button from '@hamzus-ui/Button/Button.svelte';
+	import * as DropdownMenu from '@hamzus-ui/DropdownMenu';
+	import * as Popover from '@hamzus-ui/Popover';
+	import Input from '@hamzus-ui/Input/Input.svelte';
+	import RadioGroup from '@hamzus-ui/Radios/RadioGroup/RadioGroup.svelte';
+	import Swicth from '@hamzus-ui/Swicth/Swicth.svelte';
+	// props
+	export let tableId = null;
+	// local var
+    const minimalColumnWidth = 50
+	let start = null;
+	let trackedColumnName = null;
+	let trackedColumnWidth = null;
+	// function
+	function handleMouseDown(event, columnName) {
+		start = event.clientX;
+		trackedColumnName = columnName;
+		for (let i = 0; i < $tableData[tableId].columns.length; i++) {
+			const element = $tableData[tableId].columns[i];
+			if (element.name === trackedColumnName) {
+                trackedColumnWidth = element.width ?? element.initialWidth ?? 0
+                break
+			}
+		}
+		document.addEventListener('mousemove', handleMouseMove);
+		document.addEventListener('mouseup', removeListener);
+	}
+	function handleMouseMove(event) {
+		const deltaX = start - event.clientX;
+
+		// update la colonne
+		tableData.update((actualValue) => {
+			for (let i = 0; i < actualValue[tableId].columns.length; i++) {
+				const element = actualValue[tableId].columns[i];
+				if (element.name === trackedColumnName) {
+                    const newWidth = trackedColumnWidth - deltaX
+					actualValue[tableId].columns[i].width = newWidth > minimalColumnWidth ? newWidth : minimalColumnWidth;
+                    break;
+				}
+			}
+
+			return actualValue;
+		});
+	}
+	function removeListener() {
+		document.removeEventListener('mousemove', handleMouseMove);
+		document.removeEventListener('mouseup', removeListener);
+	}
+    function handleChangeSkipLine(columnName, newValue) {
+        tableData.update((actualValue) => {
+			for (let i = 0; i < actualValue[tableId].columns.length; i++) {
+				const element = actualValue[tableId].columns[i];
+				if (element.name === columnName) {
+					actualValue[tableId].columns[i].skipLine = newValue;
+                    break;
+				}
+			}
+
+			return actualValue;
+		});
+    }
+    function handleFilter(columnName, newValue) {
+        
+        let foundedColumn = false
+        tableData.update((actualValue) => {
+			for (let i = 0; i < actualValue[tableId].columns.length; i++) {
+				const element = actualValue[tableId].columns[i];
+				if (element.name === columnName) {
+                    if (newValue === null || newValue === undefined || newValue === "") {
+                        actualValue[tableId].columns[i].filter = newValue
+                        delete actualValue[tableId].filters[columnName]
+                        foundedColumn = true
+                        break
+                    }
+                    actualValue[tableId].columns[i].filter = newValue
+                    actualValue[tableId].filters[columnName] = newValue
+                    foundedColumn = true
+                    break;
+				}
+			}
+
+			return actualValue;
+		});
+        
+        if (foundedColumn) {
+            // emmetre un event
+            document.dispatchEvent(new Event("updateTableResult"))
+        }
+    }
+    function handleSort(columnName){
+        tableData.update((actualValue) => {
+            const actualSort = actualValue[tableId].sort
+
+            // si la colonne est different alors on set la direction en desc
+            let newDirection = ""
+            if (actualSort.columnName != columnName) {
+                newDirection = "DESC"
+            }else{
+                // modifier la direction
+                switch (actualSort.direction) {
+                    case "":
+                        newDirection = "DESC"
+                        break;
+                    case "DESC":
+                        newDirection = "ASC"
+                        break;
+                    default:
+                        // if "ASC" -> remove filter
+                        newDirection = ""
+                        break;
+                }
+            }
+
+			actualValue[tableId].sort = {
+                "columnName":columnName,
+                "direction":newDirection
+            }
+
+			return actualValue;
+		});
+        document.dispatchEvent(new Event("updateTableResult"))
+    }
+    function focusInput(columnName) {
+        // selectionner l input si il y en a 
+        
+        if (document.querySelector(`.input-column-hamzus-${columnName}`)) {
+            document.querySelector(`.input-column-hamzus-${columnName} input`).focus()
+        }
+    }
+</script>
+
+<div class="header">
+	{#each $tableData[tableId].columns as column, index}
+		{#if !column.hidden}
+			<div class="column" style="--width:{column.width ?? column.initialWidth}px;">
+				{#if column.isSearchable}
+					<DropdownMenu.Root triggerFullWidth onOpen={()=>{focusInput(column.name)}}>
+						<DropdownMenu.Trigger slot="trigger">
+							<Button
+								style="width:100%;"
+								avoidRipple={!column.isSearchable}
+								variant="ghost"
+							>
+                                <h4>{column.label}</h4>
+                                <h4>{($tableData[tableId].sort && $tableData[tableId].sort.columnName === column.name && $tableData[tableId].sort.direction !== "" ? ($tableData[tableId].sort.direction === "DESC" ? "⬇️" : "⬆️") : "")}</h4>
+                                <h4>{$tableData[tableId].filters && $tableData[tableId].filters[column.name] != "" & $tableData[tableId].filters[column.name] != undefined ? "🔍" : ""}</h4>
+
+                            </Button>
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content slot="content">
+							<DropdownMenu.Label>{column.label}</DropdownMenu.Label>
+							{#if !column.searchChoices}
+                                <div class="input-column-hamzus-{column.name}">
+                                    <Input placeholder="filtre" value={column.filter} onChange={(newValue)=>{handleFilter(column.name, newValue)}}></Input>
+                                </div>
+							{:else}
+								<Popover.Root direction="right" triggerFullWidth>
+									<Popover.Trigger slot="trigger">
+										<Button style="width:100%;justify-content:space-between;" variant="ghost">
+											<h4>filtre</h4>
+											<svg
+												width="24"
+												height="24"
+												viewBox="0 0 24 24"
+												fill="none"
+												xmlns="http://www.w3.org/2000/svg"
+											>
+												<path
+													d="M14.4291 18.8201C14.2391 18.8201 14.0491 18.7501 13.8991 18.6001C13.6091 18.3101 13.6091 17.8301 13.8991 17.5401L19.4391 12.0001L13.8991 6.46012C13.6091 6.17012 13.6091 5.69012 13.8991 5.40012C14.1891 5.11012 14.6691 5.11012 14.9591 5.40012L21.0291 11.4701C21.3191 11.7601 21.3191 12.2401 21.0291 12.5301L14.9591 18.6001C14.8091 18.7501 14.6191 18.8201 14.4291 18.8201Z"
+													fill="#292D32"
+												/>
+												<path
+													d="M20.33 12.75H3.5C3.09 12.75 2.75 12.41 2.75 12C2.75 11.59 3.09 11.25 3.5 11.25H20.33C20.74 11.25 21.08 11.59 21.08 12C21.08 12.41 20.74 12.75 20.33 12.75Z"
+													fill="#292D32"
+												/>
+											</svg>
+										</Button>
+									</Popover.Trigger>
+									<Popover.Content slot="content">
+										<Popover.Button label="aucun" onClick={()=>{handleFilter(column.name, null)}}></Popover.Button>
+										{#each column.searchChoices as choice}
+											<Popover.Button label={choice.label} onClick={()=>{handleFilter(column.name, choice.value)}}></Popover.Button>
+										{/each}
+									</Popover.Content>
+								</Popover.Root>
+							{/if}
+							<DropdownMenu.Separator></DropdownMenu.Separator>
+							<DropdownMenu.Button variant="ghost">
+								<label
+									style="display:flex;align-items:center;justify-content:space-between;width:100%;"
+								>
+									<h4>passer a la ligne</h4>
+									<Swicth checked={column.skipLine} onChange={(newValue)=>{handleChangeSkipLine(column.name, newValue)}} size={16}></Swicth>
+								</label>
+							</DropdownMenu.Button>
+							{#if column.isSortable !== false}
+								<DropdownMenu.Separator></DropdownMenu.Separator>
+								<DropdownMenu.Button onClick={()=>{handleSort(column.name)}} variant="ghost" label="trier"></DropdownMenu.Button>
+							{/if}
+						</DropdownMenu.Content>
+					</DropdownMenu.Root>
+				{:else}
+					<Button
+						style="width:100%;"
+						avoidRipple={!column.isSearchable}
+						variant="ghost"
+						label={column.label}
+					></Button>
+				{/if}
+				<span class="resizer"
+					><button
+						onmousedown={(event) => {
+							handleMouseDown(event, column.name);
+						}}
+						class="resizer-pad"
+					></button></span
+				>
+			</div>
+		{/if}
+	{/each}
+</div>
+
+<style>
+	.header {
+		min-width: 100%;
+		width: max-content;
+		display: flex;
+		border-bottom: 1px solid var(--stroke);
+		user-select: none;
+		background-color: var(--bg-2);
+		position: sticky;
+		top: 0;
+		z-index: 1;
+	}
+	/* column */
+	.column {
+		display: flex;
+		width: var(--width);
+	}
+
+	/* track */
+	.resizer {
+		cursor: ew-resize;
+		width: 0px;
+		height: 100%;
+		position: relative;
+	}
+	.resizer:has(.resizer-pad:hover) {
+		background-color: var(--accent);
+		outline: 2px solid var(--accent);
+	}
+	.resizer:has(.resizer-pad:global(.resizing)) {
+		background-color: var(--accent);
+		outline: 2px solid var(--accent);
+	}
+	.resizer-pad {
+		all: unset;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 15px;
+		height: 100%;
+	}
+</style>

package/src/components/hamzus-ui/Table/NavigationBar.svelte

@@ -0,0 +1,10 @@
+<script>
+    // import
+
+    // props
+    export let tableId = null
+
+    // local var
+
+    // function
+</script>

package/src/components/hamzus-ui/Table/Root.svelte

@@ -0,0 +1,128 @@
+<script>
+	// import
+	import { onMount } from 'svelte';
+	import { tableData } from './table';
+
+	// props
+	export let tableId = 0;
+	export let globalSearch = '';
+	export let columns = [];
+	export let filters = {};
+	export let sort = {};
+	export let actions = [];
+	export let totalOfRows = 0;
+	export let limit = 20;
+	export let offset = 0;
+	export let getRows = (globalSearch, filters) => {};
+
+	// locale var
+	let monted = false;
+	let rows = [];
+	let defaultColumns = [...columns];
+
+	// life component
+	onMount(async () => {
+		// verifier si l utilisateur possede une ocnfigursation enregistre dans le localsotrage
+		const savedConfiguration = localStorage.getItem(`table_${tableId}`);
+		if (savedConfiguration) {
+			try {
+				const overrideConfig = JSON.parse(savedConfiguration);
+				columns = overrideConfig.columns;
+				filters = overrideConfig.filters;
+				globalSearch = overrideConfig.globalSearch;
+			} catch (error) {
+				// suprimmer ce localstorage car il ne peut pas etre decoder
+				localStorage.removeItem(`table_${tableId}`);
+			}
+		}
+
+		// aller chercher les rows
+        const request = await getRows(globalSearch, filters, sort, limit, offset)
+        totalOfRows = request.totalOfRows
+		rows = request.rows;
+
+		// creer la table dans le store
+
+		const table = {
+			globalSearch: globalSearch,
+			columns: columns,
+			filters: filters,
+			sort: sort,
+			actions: actions,
+			rows: rows,
+			totalOfRows: totalOfRows,
+			limit: limit,
+			offset: offset,
+			getRows: getRows
+		};
+
+		tableData.update((actualValue) => {
+			const newValue = {
+				...actualValue,
+				[tableId]: table
+			};
+			return {
+				...newValue
+			};
+		});
+
+		// add les event
+		document.addEventListener('updateTableResult', handleUpdateResult);
+		document.addEventListener('resetTableColumnsSettings', handleResetSettings);
+
+		monted = true;
+
+		return () => {
+			document.removeEventListener('updateTableResult', handleUpdateResult);
+			document.removeEventListener('resetTableColumnsSettings', handleResetSettings);
+		};
+	});
+
+	async function handleUpdateResult() {
+		const actualTableData = $tableData[tableId];
+
+        const request = await getRows(
+			actualTableData.globalSearch,
+			actualTableData.filters,
+			actualTableData.sort,
+			actualTableData.limit,
+			actualTableData.offset
+		);
+        totalOfRows = request.totalOfRows
+		$tableData[tableId].rows = request.rows;
+
+		saveDataActualData();
+	}
+	async function saveDataActualData() {
+		if (!monted) {
+			return;
+		}
+		localStorage.setItem(`table_${tableId}`, JSON.stringify($tableData[tableId]));
+	}
+	function handleResetSettings() {
+		tableData.update((actualValue) => {
+			actualValue[tableId].columns = JSON.parse(JSON.stringify(defaultColumns));
+			return {
+				...actualValue
+			};
+		});
+	}
+</script>
+
+{#if monted}
+	<div class="table">
+		<slot name="actions-bar" {tableId}></slot>
+		<slot name="header" {tableId}></slot>
+		<slot name="content" {tableId}></slot>
+		<slot name="navigation-bar" {tableId}></slot>
+	</div>
+{/if}
+
+<style>
+	.table {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		overflow-x: scroll;
+	}
+</style>

package/src/components/hamzus-ui/Table/index.js

@@ -0,0 +1,5 @@
+export { default as Root } from './Root.svelte';//main logic
+export { default as ActionsBar } from './ActionsBar.svelte';//search, active filters, columns list,...
+export { default as Header } from './Header.svelte';//table header/columns
+export { default as Content } from './Content.svelte';//table rows
+export { default as NavigationBar } from './NavigationBar.svelte';// bottom navigation bar