@stonecrop/atable 0.5.0 → 0.6.1

package/src/components/ATableColumnFilter.vue

@@ -0,0 +1,212 @@
+<template>
+	<div class="column-filter">
+		<input
+			v-if="(column.filterType || 'text') === 'text'"
+			v-model="filterValue"
+			type="text"
+			class="filter-input"
+			@input="updateFilter(filterValue)" />
+
+		<input
+			v-else-if="column.filterType === 'number'"
+			v-model="filterValue"
+			type="number"
+			class="filter-input"
+			@input="updateFilter(filterValue)" />
+
+		<label v-else-if="column.filterType === 'checkbox'" class="checkbox-filter">
+			<input v-model="filterValue" type="checkbox" class="filter-checkbox" @change="updateFilter(filterValue)" />
+			<span>{{ column.label }}</span>
+		</label>
+
+		<select
+			v-else-if="column.filterType === 'select'"
+			v-model="filterValue"
+			class="filter-select"
+			@change="updateFilter(filterValue)">
+			<option value="">All</option>
+			<option v-for="option in getSelectOptions(column)" :key="option.value || option" :value="option.value || option">
+				{{ option.label || option }}
+			</option>
+		</select>
+
+		<input
+			v-else-if="column.filterType === 'date'"
+			v-model="filterValue"
+			type="date"
+			class="filter-input"
+			@change="updateFilter(filterValue)" />
+
+		<div v-else-if="column.filterType === 'dateRange'" class="date-range-filter">
+			<input
+				v-model="dateFilter.startValue"
+				type="date"
+				class="filter-input"
+				@change="updateDateRangeFilter('start', dateFilter.startValue)" />
+			<span class="date-separator">-</span>
+			<input
+				v-model="dateFilter.endValue"
+				type="date"
+				class="filter-input"
+				@change="updateDateRangeFilter('end', dateFilter.endValue)" />
+		</div>
+
+		<component
+			v-else-if="column.filterType === 'component' && column.filterComponent"
+			:is="column.filterComponent"
+			:value="filterValue"
+			:column="column"
+			:colIndex="colIndex"
+			:store="store"
+			@update:value="updateFilter($event)" />
+
+		<button v-if="hasActiveFilter" @click="clearFilter" class="clear-btn" title="Clear">×</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { createTableStore } from '../stores/table'
+import type { TableColumn } from '../types'
+
+const { column, colIndex, store } = defineProps<{
+	column: TableColumn
+	colIndex: number
+	store: ReturnType<typeof createTableStore>
+}>()
+
+const filterValue = ref<any>('')
+const dateFilter = reactive({
+	startValue: '' as string,
+	endValue: '' as string,
+})
+
+const getSelectOptions = (column: TableColumn): any[] => {
+	if (column.filterOptions) return column.filterOptions
+
+	// Auto-generate options from data
+	const uniqueValues = new Set<any>()
+	store.rows.forEach(row => {
+		const value = row[column.name]
+		if (value !== null && value !== undefined && value !== '') {
+			uniqueValues.add(value)
+		}
+	})
+
+	return Array.from(uniqueValues).map(value => ({
+		value: value,
+		label: String(value),
+	}))
+}
+
+const hasActiveFilter = computed(() => {
+	return !!(filterValue.value || dateFilter.startValue || dateFilter.endValue)
+})
+
+// Filter actions
+const updateFilter = (value: any) => {
+	if (!value && column.filterType !== 'checkbox') {
+		store.clearFilter(colIndex)
+		filterValue.value = ''
+	} else {
+		filterValue.value = value
+		store.setFilter(colIndex, { value })
+	}
+}
+
+const updateDateRangeFilter = (rangeType: 'start' | 'end', value: any) => {
+	if (rangeType === 'start') {
+		dateFilter.startValue = value
+	} else {
+		dateFilter.endValue = value
+	}
+
+	if (!dateFilter.startValue && !dateFilter.endValue) {
+		store.clearFilter(colIndex)
+	} else {
+		store.setFilter(colIndex, {
+			value: null,
+			startValue: dateFilter.startValue,
+			endValue: dateFilter.endValue,
+		})
+	}
+}
+
+const clearFilter = () => {
+	filterValue.value = ''
+	dateFilter.startValue = ''
+	dateFilter.endValue = ''
+	store.clearFilter(colIndex)
+}
+</script>
+
+<style scoped>
+.column-filter {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	width: 100%;
+}
+
+.filter-input,
+.filter-select {
+	background-color: var(--sc-form-background) !important;
+	padding: 0.15rem 0.2rem;
+	border: 1px solid var(--sc-form-border);
+	border-radius: 3px;
+	font-size: 0.875rem;
+	color: var(--sc-text-color);
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.filter-input:focus,
+.filter-select:focus {
+	outline: none;
+	border-color: var(--sc-input-active-border-color);
+}
+
+.checkbox-filter {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	font-size: 0.875rem;
+	color: var(--sc-text-color);
+	cursor: pointer;
+}
+
+.filter-checkbox {
+	margin: 0;
+}
+
+.date-range-filter {
+	display: flex;
+	gap: 0.25rem;
+	align-items: center;
+	width: 100%;
+}
+
+.date-range-filter .filter-input {
+	flex: 1;
+	min-width: 0;
+}
+
+.date-separator {
+	color: var(--sc-gray-50);
+	font-weight: 500;
+	padding: 0 0.25rem;
+	flex-shrink: 0;
+}
+
+.clear-btn {
+	background: var(--sc-gray-10, #f0f0f0);
+	border: 1px solid var(--sc-form-border);
+	border-radius: 3px;
+	color: var(--sc-gray-70);
+	cursor: pointer;
+	font-size: 1rem;
+	padding: 0.15rem 0.4rem;
+	line-height: 1;
+	flex-shrink: 0;
+}
+</style>

package/src/components/ATableHeader.vue

@@ -1,5 +1,6 @@
 <template>
 	<thead v-if="columns.length">
+		<!-- Header row -->
 		<tr class="atable-header-row" tabindex="-1">
 			<th
 				v-if="store.zeroColumn"
@@ -17,15 +18,36 @@
 				:data-colindex="colKey"
 				tabindex="-1"
 				:style="store.getHeaderCellStyle(column)"
-				:class="column.pinned ? 'sticky-column' : ''">
+				:class="`${column.pinned ? 'sticky-column' : ''} ${column.sortable === false ? '' : 'cursor-pointer'}`"
+				@click="column.sortable !== false ? handleSort(colKey) : undefined">
 				<slot>{{ column.label || String.fromCharCode(colKey + 97).toUpperCase() }}</slot>
 			</th>
 		</tr>
+		<!-- Filters row -->
+		<tr v-if="filterableColumns.length > 0" class="atable-filters-row">
+			<th
+				v-if="store.zeroColumn"
+				:class="[
+					store.hasPinnedColumns ? 'sticky-index' : '',
+					store.isTreeView ? 'tree-index' : '',
+					store.config.view === 'list-expansion' ? 'list-expansion-index' : '',
+				]"
+				class="list-index" />
+			<th
+				v-for="(column, colKey) in columns"
+				:key="`filter-${column.name}`"
+				:class="`${column.pinned ? 'sticky-column' : ''}`"
+				:style="store.getHeaderCellStyle(column)">
+				<ATableColumnFilter v-if="column.filterable" :column="column" :col-index="colKey" :store="store" />
+			</th>
+		</tr>
 	</thead>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { vResizeObserver } from '@vueuse/components'
+import ATableColumnFilter from './ATableColumnFilter.vue'
 import { createTableStore } from '../stores/table'
 import type { TableColumn } from '../types'
 
@@ -34,6 +56,10 @@ const { columns, store } = defineProps<{
 	store: ReturnType<typeof createTableStore>
 }>()
 
+const filterableColumns = computed(() => columns.filter(column => column.filterable))
+
+const handleSort = (colIndex: number) => store.sortByColumn(colIndex)
+
 const onResize = (entries: ReadonlyArray<ResizeObserverEntry>) => {
 	for (const entry of entries) {
 		if (entry.borderBoxSize.length === 0) continue
@@ -75,4 +101,13 @@ th {
 	width: 2ch;
 	margin-left: 5px;
 }
+
+.cursor-pointer {
+	cursor: pointer;
+}
+
+.atable-filters-row th {
+	padding: 0.25rem 0.5ch;
+	vertical-align: top;
+}
 </style>

package/src/index.ts

@@ -10,6 +10,7 @@ import ATableLoading from './components/ATableLoading.vue'
 import ATableLoadingBar from './components/ATableLoadingBar.vue'
 import ATableModal from './components/ATableModal.vue'
 export { createTableStore } from './stores/table'
+export type { FilterState, FilterStateRecord } from './stores/table'
 export type * from './types'
 
 /**

package/src/stores/table.ts

@@ -15,6 +15,25 @@ import type {
 } from '../types'
 import { generateHash } from '../utils'
 
+/**
+ * Represents the state of a single filter
+ * @public
+ */
+export interface FilterState {
+	/** The main filter value */
+	value: any
+	/** Start value for date range filters */
+	startValue?: any
+	/** End value for date range filters */
+	endValue?: any
+}
+
+/**
+ * Record mapping column indices to their filter states
+ * @public
+ */
+export type FilterStateRecord = Record<number, FilterState>
+
 /**
  * Create a table store
  * @param initData - Initial data for the table store
@@ -186,6 +205,11 @@ export const createTableStore = (initData: {
 		const ganttBars = ref<GanttBarInfo[]>([])
 		const connectionHandles = ref<ConnectionHandle[]>([])
 		const connectionPaths = ref<ConnectionPath[]>([])
+		const sortState = ref<{ column: number | null; direction: 'asc' | 'desc' | null }>({
+			column: null,
+			direction: null,
+		})
+		const filterState = ref<FilterStateRecord>({})
 
 		// getters
 		const hasPinnedColumns = computed(() => columns.value.some(col => col.pinned))
@@ -207,6 +231,63 @@ export const createTableStore = (initData: {
 			config.value.view ? ['list', 'tree', 'tree-gantt', 'list-expansion'].includes(config.value.view) : false
 		)
 
+		const filteredRows = computed(() => {
+			let filtered = rows.value.map((row, originalIndex) => ({
+				...row,
+				originalIndex,
+			}))
+
+			// Apply filters
+			Object.entries(filterState.value).forEach(([colIndexStr, filter]) => {
+				const colIndex = parseInt(colIndexStr)
+				const column = columns.value[colIndex]
+
+				if (!column) return
+
+				// Skip if filter has no value (except for dateRange and checkbox which can have different value structures)
+				const hasFilterValue =
+					filter.value ||
+					filter.startValue ||
+					filter.endValue ||
+					(column.filterType === 'checkbox' && filter.value !== undefined)
+
+				if (!hasFilterValue) return
+
+				filtered = filtered.filter(row => {
+					const cellValue = row[column.name]
+					return applyFilter(cellValue, filter, column)
+				})
+			})
+
+			// Apply sorting if active
+			if (sortState.value.column !== null && sortState.value.direction) {
+				const column = columns.value[sortState.value.column]
+				const direction = sortState.value.direction
+
+				filtered.sort((a, b) => {
+					let aVal = a[column.name]
+					let bVal = b[column.name]
+
+					if (aVal === null || aVal === undefined) aVal = ''
+					if (bVal === null || bVal === undefined) bVal = ''
+
+					const aNum = Number(aVal)
+					const bNum = Number(bVal)
+					const isNumeric = !isNaN(aNum) && !isNaN(bNum) && aVal !== '' && bVal !== ''
+
+					if (isNumeric) {
+						return direction === 'asc' ? aNum - bNum : bNum - aNum
+					} else {
+						const aStr = String(aVal).toLowerCase()
+						const bStr = String(bVal).toLowerCase()
+						return direction === 'asc' ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr)
+					}
+				})
+			}
+
+			return filtered
+		})
+
 		// actions
 		const getCellData = <T = any>(colIndex: number, rowIndex: number): T => table.value[`${colIndex}:${rowIndex}`]
 		const setCellData = (colIndex: number, rowIndex: number, value: any) => {
@@ -484,6 +565,118 @@ export const createTableStore = (initData: {
 			return connectionHandles.value.filter(handle => handle.barId === barId)
 		}
 
+		const sortByColumn = (colIndex: number) => {
+			const column = columns.value[colIndex]
+			if (column.sortable === false) return
+
+			let newDirection: 'asc' | 'desc'
+			if (sortState.value.column === colIndex) {
+				if (sortState.value.direction === 'asc') {
+					newDirection = 'desc'
+				} else {
+					newDirection = 'asc'
+				}
+			} else {
+				newDirection = 'asc'
+			}
+
+			sortState.value.column = colIndex
+			sortState.value.direction = newDirection
+
+			// Note: The actual sorting is now handled in the filteredRows computed property
+			// This ensures that sorting works on filtered data without modifying the original rows
+		}
+
+		const applyFilter = (cellValue: any, filter: FilterState, column: TableColumn): boolean => {
+			const filterType = column.filterType || 'text'
+			const value = filter.value
+
+			if (!value && filterType !== 'dateRange' && filterType !== 'checkbox') return true
+
+			switch (filterType) {
+				case 'text': {
+					// Handle objects with nested properties
+					let searchableText = ''
+					if (typeof cellValue === 'object' && cellValue !== null) {
+						// If it's an object, search in all string values
+						searchableText = Object.values(cellValue as Record<string, unknown>).join(' ')
+					} else {
+						searchableText = String(cellValue || '')
+					}
+					return searchableText.toLowerCase().includes(String(value).toLowerCase())
+				}
+
+				case 'number': {
+					const numValue = Number(cellValue)
+					const filterNum = Number(value)
+					return !isNaN(numValue) && !isNaN(filterNum) && numValue === filterNum
+				}
+
+				case 'select':
+					return cellValue === value
+
+				case 'checkbox':
+					// For checkbox filter, if checked (true), show only truthy values
+					// If unchecked (false/undefined), show all values
+					if (value === true) {
+						return !!cellValue
+					}
+					return true
+
+				case 'date': {
+					// Handle both timestamp numbers and date strings
+					let cellDate: Date
+					if (typeof cellValue === 'number') {
+						// Apply the same year transformation as in the format function
+						const originalDate = new Date(cellValue)
+						const currentYear = new Date().getFullYear()
+						cellDate = new Date(currentYear, originalDate.getMonth(), originalDate.getDate())
+					} else {
+						cellDate = new Date(String(cellValue))
+					}
+					const filterDate = new Date(String(value))
+					return cellDate.toDateString() === filterDate.toDateString()
+				}
+
+				case 'dateRange': {
+					const startValue = filter.startValue
+					const endValue = filter.endValue
+					if (!startValue && !endValue) return true
+
+					// Handle both timestamp numbers and date strings
+					let cellDateRange: Date
+					if (typeof cellValue === 'number') {
+						// Apply the same year transformation as in the format function
+						const originalDate = new Date(cellValue)
+						const currentYear = new Date().getFullYear()
+						cellDateRange = new Date(currentYear, originalDate.getMonth(), originalDate.getDate())
+					} else {
+						cellDateRange = new Date(String(cellValue))
+					}
+					if (startValue && cellDateRange < new Date(String(startValue))) return false
+					if (endValue && cellDateRange > new Date(String(endValue))) return false
+
+					return true
+				}
+
+				default:
+					return true
+			}
+		}
+
+		const setFilter = (colIndex: number, filter: FilterState) => {
+			if (!filter.value && !filter.startValue && !filter.endValue) {
+				// Remove filter if empty
+				delete filterState.value[colIndex]
+			} else {
+				filterState.value[colIndex] = filter
+			}
+		}
+
+		const clearFilter = (colIndex: number) => {
+			delete filterState.value[colIndex]
+		}
+
 		return {
 			// state
 			columns,
@@ -491,13 +684,16 @@ export const createTableStore = (initData: {
 			connectionHandles,
 			connectionPaths,
 			display,
+			filterState,
 			ganttBars,
 			modal,
 			rows,
+			sortState,
 			table,
 			updates,
 
 			// getters
+			filteredRows,
 			hasPinnedColumns,
 			isGanttView,
 			isTreeView,
@@ -506,6 +702,7 @@ export const createTableStore = (initData: {
 			zeroColumn,
 
 			// actions
+			clearFilter,
 			closeModal,
 			createConnection,
 			deleteConnection,
@@ -524,6 +721,8 @@ export const createTableStore = (initData: {
 			resizeColumn,
 			setCellData,
 			setCellText,
+			setFilter,
+			sortByColumn,
 			toggleRowExpand,
 			unregisterConnectionHandle,
 			unregisterGanttBar,

package/src/types/index.ts

@@ -72,6 +72,37 @@ export interface TableColumn {
 	 */
 	resizable?: boolean
 
+	/**
+	 * Control whether the column should be sortable.
+	 *
+	 * @defaultValue true
+	 */
+	sortable?: boolean
+
+	/**
+	 * Control whether the column should be filterable and define filter configuration.
+	 *
+	 * @defaultValue true
+	 */
+	filterable?: boolean
+
+	/**
+	 * The type of filter for the column.
+	 *
+	 * @defaultValue 'text'
+	 */
+	filterType?: 'text' | 'select' | 'number' | 'date' | 'dateRange' | 'checkbox' | 'component'
+
+	/**
+	 * Options for select-type filters.
+	 */
+	filterOptions?: any[]
+
+	/**
+	 * Custom component for filtering.
+	 */
+	filterComponent?: string
+
 	/**
 	 * The component to use to render the cell for the column. If not provided, the table will
 	 * render the default `<td>` element.