Table

Find the source code here.

Overview

Table is a component showing information having same properties. For instance, customer orders list in an e-commerce shop.

Table component provides you two greats features working out of the box: sorting and filtering.

We will see in this page the many possibilities you can achieve with this component.

Installation

Notes

To use this component, you need to initialize your project first. If not done yet, run one of the following command:

npx jsxpine init or yarn jsxpine init or pnpm jsxpine init or bunx jsxpine init.

Go to the installation and usage page to learn more.

jsxpine add table
Copied !

Copied !


	--------------------     Components Dependencies   -------------------------

		import { Icon } from "./icon.component";
import clsx from "clsx";

/**
 * @typedef {Object} InputProps
 * @type {Omit<JSX.HtmlInputTag, "className"> & import("../common/props").CLSXClassProps}
 */

/**
 * @typedef TextInputProps
 * @type {InputProps}
 */

/**
 * @typedef PasswordInputProps
 * @type {{ hideIcon?: boolean } & InputProps}
 */

/**
 * @typedef NumberInputProps
 * @type {Omit<InputProps, "placeholder" | "min" | "max"> & { min?: number, max?: number }}
 */

/**
 * @typedef TextareaInputProps
 * @type {{ value?: string, noResize?: boolean} & Omit<JSX.HtmlTextAreaTag, "className"> & import("../common/props").CLSXClassProps}
 */

/**
 * @typedef {Object} DefaultSelectOptionType
 * @property {string} label
 * @property {string | number} [value]
 * @property {boolean} [disabled]
 */

/**
 * @typedef SelectOptionType
 * @type {DefaultSelectOptionType & Record<string, unknown>}
 */

/**
 * @typedef SelectInputProps
 * @type {{ value?: string | number | string[], placeholder?: string, items?: SelectOptionType[], hidePlaceholder?: boolean } & Omit<JSX.HtmlSelectTag, "className"> & import("../common/props").CLSXClassProps}
 */

/**
 * @typedef CheckboxInputProps
 * @type {Omit<InputProps, "placeholder">}
 */

/**
 * @typedef RadioInputProps
 * @type {Omit<InputProps, "placeholder">}
 */

/**
 * Checkbox Input props
 * @type {import("../common/props").JSXComponent<CheckboxInputProps>}
 */
export function CheckboxInput(props) {
	return <input type="checkbox" {...props} />;
}

/**
 * Date Input props
 * @type {import("../common/props").JSXComponent<TextInputProps>}
 */
export function DateInput(props) {
	const { value = "", class: className, ...restProps } = props;
	return (
		<div
			class={clsx("input flex items-center justify-center gap-x-2", className)}
			x-data={`{ value: "${value}" }`}
		>
			<input
				x-ref="dateInput"
				type="date"
				{...restProps}
				x-model="value"
				class="flex-1 px-1"
			/>
			{/* Because calendar-picker-icon doesn't change with theme toggle */}
			<button x-on:click="$refs.dateInput.showPicker()">
				<Icon name="ri.calendar-line" />
			</button>
		</div>
	);
}

/**
 * Email Input props
 * @type {import("../common/props").JSXComponent<TextInputProps>}
 */
export function EmailInput(props) {
	const { value = "", class: className, ...restProps } = props;
	return (
		<div
			class={clsx("input input-primary flex items-center gap-x-2", className)}
			x-data={`{ value: "${value}" }`}
		>
			<input type="email" {...restProps} x-model="value" class="flex-1 px-1" />
			<button
				type="button"
				x-bind:disabled="!value"
				x-on:click="value = ''"
				class="flex items-center justify-center"
				x-bind:class="value ? 'opacity-100' : 'opacity-0'"
			>
				<Icon name="ri.close-line" size={5} />
			</button>
		</div>
	);
}

/**
 * File Input props
 * @type {import("../common/props").JSXComponent<TextInputProps>}
 */
export function FileInput(props) {
	const { value = "", class: className, ...restProps } = props;
	return (
		<div
			class={clsx("input flex items-center justify-center", className)}
			x-data={`{ value: "${value}" }`}
		>
			<input type="file" {...restProps} x-model="value" class="flex-1 px-1" />
		</div>
	);
}

/**
 * Number Input props
 * @type {import("../common/props").JSXComponent<NumberInputProps>}
 */
export function NumberInput(props) {
	const { min = 1, max, value = 1, class: className, ...restProps } = props;
	return (
		<input
			type="number"
			x-data={`{ value: ${value} }`}
			class={clsx("text-center input out-of-range:bg-danger-500", className)}
			{...restProps}
			min={String(min)}
			max={String(max)}
			x-model="value"
			pattern="/\d/g"
		/>
	);
}

/**
 * Password Input props
 * @type {import("../common/props").JSXComponent<PasswordInputProps>}
 */
export function PasswordInput(props) {
	const {
		value = "",
		hideIcon = false,
		class: className,
		...restProps
	} = props;
	return (
		<div
			class={clsx("input input-primary flex items-center gap-x-2", className)}
			x-data={`{ value: "${value}", show: false }`}
		>
			<input
				x-bind:type="show ? 'text' : 'password'"
				{...restProps}
				x-model="value"
				class="flex-1 px-1"
			/>
			{!hideIcon ? (
				<button
					type="button"
					x-bind:disabled="!value"
					x-on:click="show = !show"
					class="flex items-center justify-center"
				>
					<template x-if="!show">
						<Icon name="ri.eye-line" stroke-width="0.5" size={5} />
					</template>
					<template x-if="show">
						<Icon name="ri.eye-off-line" stroke-width="0.5" size={5} />
					</template>
				</button>
			) : null}
		</div>
	);
}

/**
 * Radio Input props
 * @type {import("../common/props").JSXComponent<RadioInputProps>}
 */
export function RadioInput(props) {
	return <input type="radio" {...props} />;
}

/**
 * Select Input props
 * @type {import("../common/props").JSXComponent<SelectInputProps>}
 */
export function SelectInput(props) {
	const {
		items = [],
		placeholder = "Select a value",
		hidePlaceholder = false,
		value,
		class: className,
		...restProps
	} = props;
	return (
		<select
			{...restProps}
			x-data={`{ value: "${value}" }`}
			class={clsx(
				"w-full p-2 text-md border border-base-light rounded cursor-pointer focus:outline-none focus:ring-2 focus:border-primary"
			)}
		>
			<option class={clsx({ hidden: hidePlaceholder })} selected safe>
				{placeholder}
			</option>
			{items.map((item) => {
				return (
					<option value={String(item.value)} safe>
						{item.label}
					</option>
				);
			})}
		</select>
	);
}

/**
 * Text Input props
 * @type {import("../common/props").JSXComponent<TextInputProps>}
 */
export function TextInput(props) {
	const { value = "", class: className, ...restProps } = props;
	return (
		<div
			class={clsx("input input-primary flex items-center gap-x-2", className)}
			x-data={`{ value: "${value}" }`}
		>
			<input type="text" {...restProps} x-model="value" class="flex-1 px-1" />
			<button
				type="button"
				x-bind:disabled="!value"
				x-on:click="value = ''"
				class="flex items-center justify-center"
				x-bind:class="value ? 'opacity-100' : 'opacity-0'"
			>
				<Icon name="ri.close-line" size={5} />
			</button>
		</div>
	);
}

/**
 * Textarea Input props
 * @type {import("../common/props").JSXComponent<TextareaInputProps>}
 */
export function TextareaInput(props) {
	const {
		value = "",
		noResize = false,
		class: className,
		...restProps
	} = props;
	return (
		<textarea
			x-data={`{ value: "${value}" }`}
			x-model="value"
			class={clsx("border rounded-lg h-full p-2", className)}
			{...restProps}
		></textarea>
	);
}

/**
 * Text Input props
 * @type {import("../common/props").JSXComponent<TextInputProps>}
 */
export function TimeInput(props) {
	const { value = "", class: className, ...restProps } = props;
	return (
		<div
			class={clsx("input flex items-center justify-center gap-x-2", className)}
			x-data={`{ value: "${value}" }`}
		>
			<input
				x-ref="timeInput"
				type="time"
				{...restProps}
				x-model="value"
				class="flex-1 px-1"
			/>
			{/* Because calendar-picker-icon doesn't change with theme toggle */}
			<button x-on:click="$refs.timeInput.showPicker()">
				<Icon name="ri.time-line" />
			</button>
		</div>
	);
}


import { icons } from "@iconify-json/ri/icons.json";
import clsx from "clsx";
import { SVG } from "./svg.component";

/**
 * @typedef {`ri.${keyof typeof import("@iconify-json/ri/icons.json")["icons"]}`} IconName
 */

/**
 * @typedef IconProps
 * @type {{size?: number, name: IconName, color?: string, applyDefsId?: string} & import("./svg.component").SVGProps}
 */

/**
 * Icon component props
 * @param {Omit<IconProps, "viewBox">} props
 */
export function Icon({
	children,
	size = 4,
	name,
	applyDefsId,
	class: className,
	...restProps
}) {
	const iconType = name.split(".")[0];
	const iconName = /** @type {keyof typeof icons} */ (name.split(".")[1]);
	if (!icons[iconName]) {
		console.error(`"${name}" is not an icon from iconify/${iconType}`);
		return "";
	}
	const { body } = icons[iconName];

	// The purpose is to retrieve value from d attribute
	let retrieveDValue = "";
	const bodyMatch = body.match(/d=".+"/g);
	const retrieveDAttribute = bodyMatch ? bodyMatch[0] : "";
	if (retrieveDAttribute) {
		retrieveDValue = retrieveDAttribute.slice(3, -2);
	}

	return (
		<SVG
			viewBox={"0 0 24 24"}
			{...restProps}
			class={clsx(`size-${size}`, className)}
		>
			{children}
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				fill={applyDefsId ? `url(#${applyDefsId})` : "currentColor"}
				d={retrieveDValue}
			/>
		</SVG>
	);
}


/**
 * @typedef SVGProps
 * @type {{fill?: string, stroke?: string, strokeWidth?: number, viewBox: string } & Omit<JSX.HtmlTag, "className"> & import("../common/props").CLSXClassProps}
 */

/**
 * SVG component props
 * @type {import("../common/props").JSXComponent<SVGProps>}
 */
export function SVG(props) {
    const {
        children,
        class: className,
        fill = "none",
        stroke = "currentColor",
        strokeWidth = 0.5,
        ...restProps
        } = props;
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            fill={fill}
            stroke={stroke}
            class={className}
            style={{ strokeWidth: String(strokeWidth) }}
            {...restProps}
        >
            {children}
        </svg>
    )
}

import { Icon } from "./icon.component";
import clsx from "clsx";

/**
 * @typedef SelectProps
 * @type {import("./input.component").SelectInputProps & { noInputIcon?: boolean, defaultValue?: import("./input.component").SelectOptionType | null }}
 */

/**
 * Select component props
 * @type {import("../common/props").JSXComponent<SelectProps>}
 */
export function Select(props) {
	const {
		items = [],
		class: className,
		placeholder = "Select Item",
		noInputIcon = false,
		disabled,
		defaultValue,
		...restProps
	} = props;
	return (
		<div
			x-data={`dropdownSelect(${JSON.stringify(items)}, ${defaultValue ? JSON.stringify(defaultValue) : "" })`}
			x-on:keydown="selectKeydown($event);"
			class={clsx("relative", className)}
			{...{
				...restProps,
				"@keydown.escape": `
					if (selectOpen){
						selectOpen = false;
					}
				`,
				"@keydown.down.prevent": `
                    if (selectOpen) {
                        selectableItemActiveNext();
                    } else {
                        selectOpen = true;
                    }
                `,
				"@keydown.up.prevent": `
                    if(selectOpen) {
                        selectableItemActivePrevious();
                    } else {
                        selectOpen=true;
                    }
                `,
				"x-on:keydown.enter": `
					selectedItem = selectableItemActive;
					selectOpen=false;
					$dispatch('select', selectableItemActive);
				`
			}}
		>
			<button
				x-ref="selectButton"
				type="button"
				x-on:click="selectOpen =! selectOpen"
				x-bind:class="{ 'focus:ring-2 focus:ring-offset-2 focus:ring-base' : !selectOpen }"
				class="relative w-full flex items-center justify-between p-1 gap-x-2 text-left hover:cursor-pointer disabled:cursor-not-allowed disabled:text-base/30 focus:outline-none text-sm"
				disabled={disabled}
			>
				<span
					x-text={`selectedItem ? selectedItem.label : "${placeholder}"`}
					class="truncate text-center"
				/>
				{!noInputIcon && (
					<span class="right-0 flex items-center pointer-events-none">
						<Icon name="ri.expand-up-down-line" stroke-width="0.5" />
					</span>
				)}
			</button>

			<ul
				x-show="selectOpen"
				x-ref="selectableItemsList"
				{...{
					"@click.away": "selectOpen = false",
					"x-transition:enter": "transition ease-out duration-50",
					"x-transition:enter-start": "opacity-0 -translate-y-1",
					"x-transition:enter-end": "opacity-100"
				}}
				x-bind:class="{ 'bottom-0 mb-10' : selectDropdownPosition == 'top', 'top-0 mt-10' : selectDropdownPosition == 'bottom' }"
				class="absolute bg-background text-foreground flex flex-col z-[1] w-full grow py-1 mt-1 overflow-y-auto text-sm rounded-md shadow-md max-h-56"
				x-cloak="true"
			>
				<template x-for="item in selectableItems" x-bind:key="item.value">
					<li
						x-on:click="selectedItem = item; selectOpen = false; $refs.selectButton.focus(); $dispatch('select', item)"
						x-bind:id="item.value + '-' + selectId"
						x-bind:data-disabled="item.disabled ?? false"
						x-on:mousemove="selectableItemActive = item"
						class="relative flex items-center h-full py-2 pr-2 pl-8 cursor-pointer select-none hover:bg-base/30 data-[disabled]:bg-base-light data-[disabled]:text-base-dark data-[disabled]:pointer-events-none data-[disabled]:pointer-not-allowed"
					>
						<Icon
							name="ri.check-line"
							x-show="selectedItem?.value == item.value"
							class="absolute left-0 size-4 ml-2 stroke-current text-nmuted-foreground"
						/>
						<span class="block font-medium truncate" x-text="item.label"></span>
					</li>
				</template>
			</ul>
		</div>
	);
}


	
	--------------------     Table Component   -------------------------

		import { Icon } from "./icon.component";
import { TextInput } from "./input.component";
import { Select } from "./select.component";
import clsx from "clsx";

/**
 * @typedef {"ASC" | "DESC"} TableSortingOrderType
 */

/**
 * @typedef {"string" | "number"} TableSortingType
 */

/**
 * @typedef {"search" | "select" | "multiple-select"} TableFilterType
 */

/**
 * @typedef { "Like" | "Equal" | "LesserThan" | "LesserThanOrEqual" | "GreaterThan" | "GreaterThanOrEqual" | "In" | "NotEqual" | "NotLike" | "NotIn" } TableFilterOperatorType
 */

/**
 * @typedef {Object} TableSearchFilterType
 * @property {"search"} type
 * @property {TableFilterOperatorType} operator
 * @property {string} [placeholder]
 */

/**
 * @typedef {Object} TableSelectFilterOperatorOptionType
 * @property {string} label
 * @property {string | number} value
 * @property {TableFilterOperatorType} [operator]
 */

/**
 * @typedef {Object} TableSelectFilterType
 * @property {"select" | "multiple-select"} type
 * @property {string} [placeholder]
 * @property {TableSelectFilterOperatorOptionType[]} operators
 */

/**
 * @typedef {Object} TableHeadColumnType
 * @property {string} index
 * @property {string} [label]
 * @property {TableSortingType} [sort]
 * @property {TableSearchFilterType | TableSelectFilterType} [filter]
 */

/**
 * @typedef {Object} TableBodyCellContentTextType
 * @property {string | number} text
 */

/**
 * @typedef {Object} TableBodyCellContentComponentType
 * @property {string} component
 */

/**
 * @typedef TableBodyCellType
 * @type {TableBodyCellContentTextType | TableBodyCellContentComponentType}
 */

/**
 * @typedef {Object} TableBodyItemRowType
 * @type {Record<string, TableBodyCellType>}
 */

/**
 * @typedef {Object} TableSearchFilterProps
 * @type {{ index: string, operator: TableFilterOperatorType } & import("./input.component").InputProps}
 */

/**
 * @typedef {Object} TableSelectFilterProps
 * @type {{ index: string, items: TableSelectFilterOperatorOptionType[] } & Omit<import("./select.component").SelectProps, "items">}
 */

/**
 * @typedef {Object} TableHeadProps
 * @type {{ columns: TableHeadColumnType[] } & import("../common/props").HTMLTagWithChildren}
 */

/**
 * @typedef {Object} TableBodyProps
 * @type {{ items?: unknown[] } & import("../common/props").HTMLTagWithChildren}
 */

/**
 * @typedef {Object} TableProps
 * @type {{ columns?: TableHeadColumnType[], items?: unknown[], theadClass?: string, tbodyClass?: string } & import("../common/props").HTMLTagWithChildren}
 */

/**
 * Search Input Filter Table component props
 * @type {import("../common/props").JSXComponent<TableSearchFilterProps>}
 */
export function SearchInputFilterTable(props) {
	const {
		index,
		operator,
		placeholder = "Type here to filter table",
		id = "search-filter",
		name = "search-filter",
		class: className
	} = props;
	return (
		<div class="w-full min-w-xs mx-auto">
			<TextInput
				x-on:input={`filterByOperatorType("search", "${operator}", "${index}", $event.target.value)`}
				placeholder={placeholder}
				id={id}
				name={name}
				class={clsx(
					"flex w-full h-10 px-3 py-2 text-sm border rounded-md",
					className
				)}
			/>
		</div>
	);
}

/**
 * Select Filter Table component props
 * @type {import("../common/props").JSXComponent<TableSelectFilterProps>}
 */
export function SelectFilterTable(props) {
	const {
		index,
		placeholder = "Select item",
		id = "select-filter",
		name = "select-filter",
		items,
		class: className
	} = props;
	return (
		<div class="w-full min-w-xs mx-auto">
			<Select
				x-on:select={`filterByOperatorType("select", event.detail.operator, "${index}", event.detail.value)`}
				class={clsx(
					"flex w-full h-10 px-3 py-2 text-sm border rounded-md",
					className
				)}
				placeholder={placeholder}
				id={id}
				name={name}
				items={items}
			/>
		</div>
	);
}

/**
 * Table Head component props
 * @type {import("../common/props").JSXComponent<TableHeadProps>}
 */
export function TableHead(props) {
	const { class: className, columns, ...restProps } = props;
	return (
		<thead>
			<tr x-ref="thead" class={clsx("border-b", className)}>
				<template x-for="column in columns">
					<th
						x-on:click={`column.sort && setSortIndex(column.index)`}
						class="px-3 py-1 text-xs font-medium"
					>
						<div class="flex items-center justify-between gap-x-2">
							<span x-text="column.label" class="uppercase"></span>
							<template x-if="column.sort">
								<div class="flex flex-col">
									<Icon
										name="ri.arrow-up-s-fill"
										size={5}
										fill="currentColor"
										x-bind:class="order === 'DESC' && column.index === currentSortIndex ? 'text-danger' : 'text-foreground'"
										class="translate-y-2"
									/>
									<Icon
										name="ri.arrow-down-s-fill"
										size={5}
										fill="currentColor"
										x-bind:class="order === 'ASC' && column.index === currentSortIndex ? 'text-danger' : 'text-foreground'"
										class="mb-2"
									/>
								</div>
							</template>
						</div>
					</th>
				</template>
			</tr>
			{columns.some((column) => column.filter) ? (
				<tr class={clsx("border-b", className)}>
					{columns.map((column) => {
                        switch (column.filter?.type) {
                            case "search":
								return (
									<td class="p-1">
										<SearchInputFilterTable
											placeholder={column.filter.placeholder}
											operator={column.filter.operator}
											index={column.index}
											class="w-full"
										/>
									</td>
								);

							case "select":
								return (
									<td class="p-1">
										<SelectFilterTable
											placeholder={column.filter.placeholder}
											items={column.filter.operators}
											index={column.index}
											class="w-full"
										/>
									</td>
								);

							default:
								return <td class="p-1" />;
						}
					})}
				</tr>
			) : null}
		</thead>
	);
}

/**
 * Table Body component props
 * @type {import("../common/props").JSXComponent<TableBodyProps>}
 */
export function TableBody(props) {
	const { class: className, ...restProps } = props;
	return (
		<tbody class={clsx("divide-y divide-base-light", className)}>
			<template x-for="item in sortItemsByIndex()">
				<tr class="">
					<template x-for="column in columns">
						<template x-if="item[column.index]">
							<td class="px-5 py-4 text-sm whitespace-nowrap">
								<template x-if="item[column.index].text">
									<span x-text="item[column.index].text"></span>
								</template>
								<template x-if="item[column.index].component">
									<div x-html="item[column.index].component"></div>
								</template>
							</td>
						</template>
					</template>
				</tr>
			</template>
			<template x-if="!items.length">
				<tr class="shrink">
					<td colspan="100%" class="text-center p-4">
						<p>No data to display</p>
					</td>
				</tr>
			</template>
		</tbody>
	);
}

/**
 * Table component props
 * @type {import("../common/props").JSXComponent<TableProps>}
 */
export function Table(props) {
	const {
		children,
		class: className,
		columns,
		items,
		theadClass,
		tbodyClass,
		...restProps
	} = props;

	return (
		<div class={clsx("divide-y divide-base-light", className)}>
			<table
				x-data={`table(${JSON.stringify(columns)}, ${JSON.stringify(items)})`}
				class="min-w-full"
                {...restProps}
			>
				{children ?? (
					<>
						{columns ? (
							<TableHead columns={columns} class={theadClass} />
						) : null}
						{items ? <TableBody class={tbodyClass} /> : null}
					</>
				)}
			</table>
		</div>
	);
}

	
	
	--------------------     Alpine Dependencies   -------------------------

		/**
 * @typedef {Object} TableDataOutput
 * @property {import("../../../components/table.component").TableHeadColumnType[]} columns
 * @property {import("../../../components/table.component").TableBodyItemRowType[]} items
 * @property {import("../../../components/table.component").TableBodyItemRowType[]} filters
 * @property {import("../../../components/table.component").TableSortingOrderType} [order]
 * @property {import("../../../components/table.component").TableHeadColumnType["index"]} [currentSortIndex]
 * @property {(index: import("../../../components/table.component").TableHeadColumnType["index"]): void} setSortIndex
 * @property {() => import("../../../components/table.component").TableBodyItemRowType[]} sortItemsByIndex
 * @property {(type:import("../../../components/table.component"). TableFilterType, operator: import("../../../components/table.component").TableFilterOperatorType, index: string, value: string | number | (string | number)[]): void} filterByOperatorType
 */

/**
 * @typedef {Function} SortFunction
 * @param {string} a
 * @param {string} b
 * @param {import("../../../components/table.component").TableSortingOrderType} [order]
 * @returns {number}
 */

/**
 * @type {SortFunction} 
 */
function sortByString(a, b, order) {
	if (order === "ASC") {
		return a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase());
	}
	if (order === "DESC") {
		return b.toLocaleLowerCase().localeCompare(a.toLocaleLowerCase());
	}
	return 0;
}

/**
 * @type {SortFunction} 
 */
function sortByNumber(a, b, order) {
	if (order === "ASC") {
		return a - b;
	}
	if (order === "DESC") {
		return b - a;
	}
	return 0;
}

/**
 * @typedef {Function} FilterFunction
 * @param {string} index
 * @param {string | number | (string | number)[]} value
 * @param {unknown[]} items
 * @returns {unknown[]}
 */

/**
 * @type {FilterFunction}
 */
const filterByLike = (index, value, items) => {
	return items.filter((item) =>
		item[index].text.toLowerCase().includes(value.toLowerCase())
	);
};

/**
 * @type {FilterFunction}
 */
const filterByNotLike = (index, value, items) => {
	return items.filter(
		(item) => !item[index].text.toLowerCase().includes(value.toLowerCase())
	);
};

/**
 * @type {FilterFunction}
 */
const filterByEqual = (index, value, items) => {
	return items.filter((item) => Number(item[index].text) === value);
};

/**
 * @type {FilterFunction}
 */
const filterByNotEqual = (index, value, items) => {
	return items.filter((item) => Number(item[index].text) !== value);
};

/**
 * @type {FilterFunction}
 */
const filterByLesserThan = (index, value, items) => {
	return items.filter((item) => Number(item[index].text) < value);
};

/**
 * @type {FilterFunction}
 */
const filterByLesserThanOrEqual = (index, value, items) => {
	return items.filter((item) => Number(item[index].text) <= value);
};

/**
 * @type {FilterFunction}
 */
const filterByGreaterThan = (index, value, items) => {
	return items.filter((item) => Number(item[index].text) > value);
};

/**
 * @type {FilterFunction}
 */
const filterByGreaterThanOrEqual = (index, value, items) => {
	return items.filter((item) => Number(item[index].text) >= value);
};

/**
 * @type {FilterFunction}
 */
const filterByIn = (index, value, items) => {
	return items.filter((item) => value.includes(item[index].text));
};

/**
 * @type {FilterFunction}
 */
const filterByNotIn = (index, value, items) => {
	return items.filter((item) => value.includes(item[index].text));
};

/**
 * Table alpine data
 * @param {import("../../../components/table.component").TableHeadColumnType[]} columns
 * @param {import("../../../components/table.component").TableBodyItemRowType[]} items
 * @returns {import("alpinejs").AlpineComponent<TableDataOutput>}
 */
export function tableData(columns = [], items = []) {
	return {
		columns,
		items,
		order: "",
		currentSortIndex: "",
		setSortIndex(index) {
			if (this.currentSortIndex !== index) {
				this.order = "ASC";
				this.currentSortIndex = index;
			} else if (this.order === "ASC") {
				this.order = "DESC";
			} else if (this.order === "DESC") {
				this.order = "";
				this.currentSortIndex = "";
			} else {
				this.order = "ASC";
			}
		},
		sortItemsByIndex() {
			const column = this.columns.find(
				(column) => column.index === this.currentSortIndex
			);

			if (!column) {
				return this.items;
			}
			if (column.sort === "string") {
				return [...this.items].sort((a, b) =>
					sortByString(a[column.index].text, b[column.index].text, this.order)
				);
			}
			if (column.sort === "number") {
				return [...this.items].sort((a, b) =>
					sortByNumber(a[column.index].text, b[column.index].text, this.order)
				);
			}
		},
		filters: [],
		filterByOperatorType(type, operator, index, value) {
			/**
			 * @type {Map<TableFilterOperatorType,Function>}
			 */
			const filterOperatorFunctionMap = new Map([
				["Like", filterByLike],
				["Equal", filterByEqual],
				["LesserThan", filterByLesserThan],
				["GreaterThan", filterByGreaterThan],
				["LesserThanOrEqual", filterByLesserThanOrEqual],
				["GreaterThanOrEqual", filterByGreaterThanOrEqual],
				["In", filterByIn],
				["NotEqual", filterByNotEqual],
				["NotLike", filterByNotLike],
				["NotIn", filterByNotIn]
			]);
			const matchedFilterIndex = this.filters.findIndex(
				(filter) => filter.type === type
			);
			if (matchedFilterIndex > -1) {
				if (this.filters[matchedFilterIndex].value !== value) {
					this.filters[matchedFilterIndex].value = value;
					this.filters[matchedFilterIndex].operator = operator;
				}
			} else {
				this.filters.push({ type, operator, index, value });
			}
			if (!value || Number(value) < 0) {
				this.filters = this.filters.filter((filter) => filter.type !== type);
			}
			let filteredItems = items;
			this.filters.forEach((filter) => {
				if (filter.value) {
					filteredItems = filterOperatorFunctionMap.get(filter.operator)(
						filter.index,
						filter.value,
						[...filteredItems]
					);
				}
			});
			this.items = filteredItems;
		}
	};
}

Basic Table

Here we have a basic table, taking just two props : columns and items.

P.S: Notice that columns is an array of items keys.

Copied !

import { Table } from "$components/table.component";
import { columns, items } from "$views/examples/table";


export function BasicTableExample() {
	return (
		<Table class="rounded-lg border" columns={columns} items={items} />
	);
}

Styling Table

About styling, Table component provides theadClass and tbodyClass props, which respectfully stylized thead and tbody tags. Two examples below.

First is about adding borders between columns. Second applied class only on even rows.

Copied !

import { Table } from "$components/table.component";
import { columns, items } from "$views/examples/table";

export function StylingTableExample() {
	return (
		<div class="flex flex-col gap-y-8">
			<div>
				<Table
					class="rounded-lg border"
					columns={columns}
					items={items}
					theadClass="divide-x"
					tbodyClass="[&>*]:divide-x"
				/>
			</div>
			<div>
				<Table
					class="rounded-lg border"
					columns={columns}
					items={items}
					tbodyClass="[&>*:nth-child(even)]:bg-slate-100 [&>*:nth-child(even)]:text-base-dark divide-y-0"
				/>
			</div>
		</div>
	);
}

Sorting Table

Table can be sorted. When enabling sorting, an icon will appear aside column label.

P.S: Just remember one rule, sorting applies to only one column.

Copied !

import { Table } from "$components/table.component";
import { sortColumns, items } from "$views/examples/table";

export function SortingTableExample() {
	return (
		<Table
			class="rounded-lg border"
			columns={sortColumns}
			items={items}
		/>
	);
}

Filtering Table

About filtering, a set of predefined filtering are provided to handle most cases. Check code part to see how this example handles filtering.

P.S: Multiple criterias are accepted when it comes to filter.

Copied !

import { Table } from "$components/table.component";
import { filterColumns, items } from "$views/examples/table";

export function FilteringTableExample() {

	return (
		<Table
			class="rounded-lg border"
			columns={filterColumns}
			items={items}
		/>
	);
}

Sorting and Filtering

Table This example is just a combination of sorting and filtering.

Copied !

import { Table } from "$components/table.component";
import {
    items,
    sortAndFilterColumns
} from "$views/examples/table";

export function SortingAndFilteringTableExample() {
	return (
		<Table
			class="rounded-lg border"
			columns={sortAndFilterColumns}
			items={items}
		/>
	);
}
ComponentsSwitch
ComponentsTabs