fix(datatable): fix ilike filter in string columns (#513)

* feat: add agents.md

* chore: setup vitest

* chore: remove jest

* tests: update spinner tests

* chore: update agents.md

* chore: update agents.md

* tests: add tests for data-table utils

* refactor: move EmptyFilterValue from types file

* chore: add type for RQL string operators

* refactor: add type for DataFilter and InternalFilter

* feat: add starts and ends with filters

* tests: update tests

* tests: add tests for new string filters

* tests: add tests for wildcard characters

* ci: add CI job for tests and lint

* ci: remove lint check

* ci: update vitest config file type

* refactor: rename RQL to DataTableQuery

Author: rsbh

.github/workflows/tests.yml

@@ -0,0 +1,39 @@
+name: Tests
+
+on:
+  pull_request:
+    branches: [main, develop]
+  push:
+    branches: [main, develop]
+
+jobs:
+  test-and-lint:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.3.0
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run tests
+        run: pnpm --filter=@raystack/apsara test
+
+      - name: Check build
+        run: pnpm build:apsara

agents.md

@@ -0,0 +1,126 @@
+# Agent Guidelines
+
+This file contains important guidelines and preferences for AI agents working on this project. Following these guidelines will help maintain code quality, consistency, and project standards.
+
+## 🎯 Project Overview
+
+This is **Apsara Design System** - a React component library built with:
+- **TypeScript** for type safety
+- **CSS Modules** for styling
+- **Vitest** for testing
+- **pnpm** for package management
+- **Biome** for code formatting and linting
+- **Monorepo structure** with documentation site
+
+## 🏗️ Project Structure
+
+```
+packages/raystack/           # Main component library
+├── components/             # React components
+├── hooks/                 # Custom hooks
+├── icons/                 # Icon components
+├── styles/               # Global styles
+├── types/                # Type definitions
+└── test-utils.tsx        # Testing utilities
+
+apps/www/                  # Documentation site
+├── src/content/docs/     # Component documentation
+└── src/components/playground/ # Demo examples
+```
+
+## 🚨 Critical Rules
+
+- **NO `any` TYPES** - Use specific types, `unknown`, or generics
+- **NO direct npm/yarn** - Always use `pnpm`
+- **NO ignored linting errors** - Fix all issues properly
+- **NO outdated documentation** - Keep docs in sync with code
+- **NO CSS-in-JS or inline styles** - Use CSS Modules only
+- **NO Tailwind CSS** - Use CSS Modules for all styling
+
+## 📦 Package Management
+
+- **Always use `pnpm`** - Never use `npm` or `yarn`
+- Installing dependencies: `pnpm add <package>` or `pnpm add -D <package>`
+- Running scripts: `pnpm run <script>` or `pnpm <script>`
+
+## 📝 TypeScript Best Practices
+
+- **Never use `any` type** - This is a strict rule
+- Use specific types, interfaces, or union types instead
+- Prefer `unknown` over `any` when type is genuinely unknown
+- Use generic types `<T>` for reusable components/functions
+- Always provide explicit return types for functions
+
+## 🎨 Styling & Design
+
+- **Use CSS Modules exclusively** for component styling
+- File naming: `component-name.module.css`
+- Import: `import styles from './component-name.module.css'`
+- Usage: `className={styles.className}`
+- **Follow accessibility standards** (ARIA labels, keyboard navigation)
+- **Ensure responsive design** works across different screen sizes
+- **Use semantic HTML** elements appropriately
+
+## 🧪 Testing Standards
+
+- **Use Vitest** for all tests (migrated from Jest)
+- Write comprehensive tests for utilities and components
+- Use proper TypeScript types in tests (never use `any`)
+- Import from `vitest` not `jest`
+- Test file pattern: `__tests__/component.test.tsx`
+
+## 📚 Documentation Requirements
+
+When adding/updating components:
+- **Component docs**: Update `apps/www/src/content/docs/components/`
+- **Demo examples**: Update `apps/www/src/components/playground/`
+- **Props documentation**: Keep API docs in sync with implementation
+
+Required for:
+- New components or hooks
+- API/props changes
+- New styling variants
+- Behavior modifications
+
+## 🚀 Development Workflow
+
+1. **Analyze existing patterns** before implementing new features
+2. **Run `pnpm format`** after making changes
+3. **Write tests** using Vitest for new utilities/components
+4. **Update documentation** when changing component APIs
+5. **Start with minimal viable implementation** then enhance
+6. **Test early and often** during development
+
+## 🤝 Communication & Best Practices
+
+- **Be transparent** about limitations or uncertainties
+- **Ask for clarification** when requirements are ambiguous
+- **Explain your reasoning** for architectural decisions
+- **Provide detailed error messages** with context
+- **Include relevant code snippets** when reporting issues
+
+## ✅ Quality Checklist
+
+Before completing any task:
+- [ ] Code follows TypeScript best practices (no `any`)
+- [ ] Styling uses CSS Modules correctly  
+- [ ] Tests are written and passing
+- [ ] Documentation is updated
+- [ ] Code is formatted with `pnpm format`
+- [ ] Follows existing project patterns
+- [ ] No linting errors remain
+- [ ] Accessibility considerations addressed
+- [ ] Error states and edge cases handled
+
+## 📋 Task Completion
+
+When finishing a task:
+1. **Summarize what was implemented** - Key features and changes
+2. **Note any limitations** - What wasn't implemented or edge cases
+3. **Provide usage examples** - How to use the new functionality
+4. **Suggest next steps** - Potential improvements or related tasks
+5. **Confirm all requirements met** - Review against original request
+
+---
+
+Following these guidelines ensures high-quality, maintainable code that aligns with project standards and team expectations.

packages/raystack/components/data-table/data-table.tsx

@@ -15,8 +15,8 @@ import { Toolbar } from './components/toolbar';
 import { TableContext } from './context';
 import {
   DataTableProps,
-  DataTableQuery,
   GroupedData,
+  InternalQuery,
   TableContextType,
   TableQueryUpdateFn,
   defaultGroupOption
@@ -28,7 +28,7 @@ import {
   groupData,
   hasQueryChanged,
   queryToTableState,
-  sanitizeTableQuery
+  transformToDataTableQuery
 } from './utils';
 
 function DataTableRoot<TData, TValue>({
@@ -51,9 +51,9 @@ function DataTableRoot<TData, TValue>({
     initialColumnVisibility
   );
   const [tableQuery, setTableQuery] =
-    useState<DataTableQuery>(defaultTableQuery);
+    useState<InternalQuery>(defaultTableQuery);
 
-  const oldQueryRef = useRef<DataTableQuery | null>(null);
+  const oldQueryRef = useRef<InternalQuery | null>(null);
 
   const reactTableState = useMemo(
     () => queryToTableState(tableQuery),
@@ -84,7 +84,7 @@ function DataTableRoot<TData, TValue>({
       hasQueryChanged(oldQueryRef.current, tableQuery) &&
       mode === 'server'
     ) {
-      onTableQueryChange(sanitizeTableQuery(tableQuery));
+      onTableQueryChange(transformToDataTableQuery(tableQuery));
       oldQueryRef.current = tableQuery;
     }
   }, [tableQuery, onTableQueryChange]);

packages/raystack/components/data-table/data-table.types.tsx

@@ -1,52 +1,66 @@
-import type { Column, ColumnDef, Table } from "@tanstack/table-core";
+import type { Column, ColumnDef, Table } from '@tanstack/table-core';
 import type {
+  DataTableFilterOperatorTypes,
   FilterOperatorTypes,
   FilterSelectOption,
   FilterTypes,
-  FilterValueType,
-} from "~/types/filters";
+  FilterValueType
+} from '~/types/filters';
 
-export type DataTableMode = "client" | "server";
+export type DataTableMode = 'client' | 'server';
 
 export const SortOrders = {
-  ASC: "asc",
-  DESC: "desc",
+  ASC: 'asc',
+  DESC: 'desc'
 } as const;
 
-export interface RQLFilterValues {
+export interface DataTableFilterValues {
   value: any;
   // Only one of these value fields should be present at a time
   boolValue?: boolean;
   stringValue?: string;
   numberValue?: number;
 }
-export interface RQLFilter extends RQLFilterValues {
+// Internal filter with UI operators and metadata
+export interface InternalFilter extends DataTableFilterValues {
   _type?: FilterTypes;
   _dataType?: FilterValueType;
   name: string;
   operator: FilterOperatorTypes;
 }
 
+// Data table filter for backend API (no internal fields)
+export interface DataTableFilter extends DataTableFilterValues {
+  name: string;
+  operator: DataTableFilterOperatorTypes;
+}
+
 type SortOrdersKeys = keyof typeof SortOrders;
-export type SortOrdersValues = typeof SortOrders[SortOrdersKeys];
+export type SortOrdersValues = (typeof SortOrders)[SortOrdersKeys];
 
 export interface DataTableSort {
   name: string;
   order: SortOrdersValues;
 }
 
-export interface DataTableQuery {
-  filters?: RQLFilter[];
+// Internal query with UI operators and metadata
+export interface InternalQuery {
+  filters?: InternalFilter[];
   sort?: DataTableSort[];
   group_by?: string[];
   offset?: number;
   limit?: number;
   search?: string;
 }
 
+// Data table query for backend API (clean, no internal fields)
+export interface DataTableQuery extends Omit<InternalQuery, 'filters'> {
+  filters?: DataTableFilter[];
+}
+
 export type DataTableColumn<TData, TValue> = Omit<
   Column<TData, TValue>,
-  "columnDef"
+  'columnDef'
 > & {
   columnDef: DataTableColumnDef<TData, TValue>;
 };
@@ -80,7 +94,7 @@ export type DataTableColumnDef<TData, TValue> = ColumnDef<TData, TValue> & {
 export interface DataTableProps<TData, TValue> {
   columns: DataTableColumnDef<TData, TValue>[];
   data: TData[];
-  query?: DataTableQuery;
+  query?: DataTableQuery; // Initial query (will be transformed to internal format)
   mode?: DataTableMode;
   isLoading?: boolean;
   loadingRowCount?: number;
@@ -102,7 +116,7 @@ export type DataTableContentProps = {
   };
 };
 
-export type TableQueryUpdateFn = (query: DataTableQuery) => DataTableQuery;
+export type TableQueryUpdateFn = (query: InternalQuery) => InternalQuery;
 
 export type TableContextType<TData, TValue> = {
   table: Table<TData>;
@@ -111,7 +125,7 @@ export type TableContextType<TData, TValue> = {
   loadMoreData: () => void;
   mode: DataTableMode;
   defaultSort: DataTableSort;
-  tableQuery?: DataTableQuery;
+  tableQuery?: InternalQuery;
   loadingRowCount?: number;
   onDisplaySettingsReset: () => void;
   updateTableQuery: (fn: TableQueryUpdateFn) => void;
@@ -124,7 +138,7 @@ export interface ColumnData {
   isVisible?: boolean;
 }
 
-interface SubRows<T> {}
+interface SubRows<_T> {}
 
 export interface GroupedData<T> extends SubRows<T> {
   label: string;
@@ -135,8 +149,6 @@ export interface GroupedData<T> extends SubRows<T> {
 }
 
 export const defaultGroupOption = {
-  id: "--",
-  label: "No grouping",
+  id: '--',
+  label: 'No grouping'
 };
-
-export const EmptyFilterValue = "--empty--";

packages/raystack/components/data-table/index.ts

@@ -1,8 +1,11 @@
 export { DataTable } from "./data-table";
 export {
   DataTableColumnDef,
+  InternalQuery,
   DataTableQuery,
   DataTableSort,
-  EmptyFilterValue,
+  InternalFilter,
+  DataTableFilter,
 } from "./data-table.types";
+export { EmptyFilterValue } from "~/types/filters";
 export { useDataTable } from "./hooks/useDataTable";