documentation improvements

README.md

@@ -122,4 +122,8 @@ Customizable native Vue3 data grid with very limited dependencies. Leverages a f
   - Add css variable for input/select font size
 - v2.1.1
   - Readme/documentation improvements
-  - CSS improvements
+  - CSS improvements
+- v2.1.2
+  - Fix for sorting and filtering not working when the data grid is not configured to be paged.
+  - Fix Icon component import in HeaderCell
+  - Documentation improvements

lib/DataGridVue.ts

@@ -1,5 +1,8 @@
 import type { FilterOperator } from './Filter'
 
+/**
+ * @description Supported data types for a column.
+ */
 export enum DataType {
   none = 0,
   alphanumeric = 1,
@@ -8,12 +11,46 @@ export enum DataType {
   dateTime = 4,
 }
 
+/**
+ * @description Column definition
+ */
 export interface Column {
+  /**
+   * @description The value to display in the columns header. If not specified {@link Field.fieldName}
+   * is converted to title casing and displayed as the columns header.
+   */
   title?: string
+
+  /**
+   * @description The {@link DataType} for the column.
+   */
   dataType: DataType
+
+  /**
+   * @description The data {@link Field} for the column. The {@link Field} describes how to get the column's value
+   * from the row's data item.
+   */
   field: Field
+
+  /**
+   * @description Whether to use this columns value as the key for the data item. It is highly recommended to set this
+   * on a single column. If more then one column is set as the key column only the first one is used. If no columns are
+   * set as the key column then the first column is used.
+   */
   isKey?: boolean
+
+  /**
+   * @description Whether the column should be sortable. This value is ignored if {@link DataGridVueGrid.sortOptions} is
+   * not set to turn on sorting for the grid. Setting this property to false will then not allow this specific column
+   * to be sorted.
+   */
   sortable?: boolean
+
+  /**
+   * @description Whether the column should be filterable. If {@link filterOptions} is not specified then the first
+   * valid {@link FilterOperator} is used for the columns {@link DataType}. Valid filter operators are defined in
+   * {@link ValidOperatorsMap}.
+   */
   filterable?: boolean
   filterOptions?: ColumnFilterOptions
   width?: string

lib/DataService.ts

@@ -2,16 +2,37 @@ import { type PageData, EmptyPageData } from './DataGridVue'
 import { type Sort, ClientSideSort } from './Sort'
 import { type Filter, ClientSideFilter } from './Filter'
 
+/**
+ * @description Interface to implement to define a data service to retrieve grid data.
+ */
 export interface DataService {
+  /**
+   * Called to get data for the currently rendered page.
+   * @param pageNum The page number for the page to load starting with `1` for the first page.
+   * If the data grid is not set configured to be pageable with the {@link DataGridVueGrid.paged}
+   * prop then this will always be `-1`.
+   * @param pageSize The maximum number of data items to display on each page. If the data grid is
+   * not set configured to be pageable with the {@link DataGridVueGrid.paged} prop then this
+   * will always be `-1`.
+   * @param sort The current colomn sort definitions in the order in which they should be applied.
+   * @param filter The current filter definition or undefined if no filter is set.
+   * @returns A Promise that returns the {@link PageData} for the current page.
+   */
   getPage: (pageNum: number, pageSize: number, sort: Sort[], filter: Filter | undefined) => Promise<PageData>
 }
 
+/**
+ * @description A stub {@link DataService} that will noop the getPage call and return {@link EmptyPageData}.
+ */
 export const StubDataService = {
   getPage(pageNum: number, pageSize: number, sort: Sort[], filter: Filter | undefined): Promise<PageData> {
     return Promise.resolve(EmptyPageData)
   },
 } as DataService
 
+/**
+ * @description The client-side {@link DataService} used when {@link DataGridVueGrid.data} is specified.
+ */
 export class ClientSideDataService implements DataService {
   dataItems: any[]
   previousSortJson: string
@@ -66,47 +87,112 @@ export class ClientSideDataService implements DataService {
   }
 
   getPage(pageNum: number, pageSize: number, sort: Sort[], filter: Filter | undefined): Promise<PageData> {
-    if (pageNum <= 0 || pageSize <= 0) {
-      console.error(`ClientSideDataRepository - getPage - invalid params - pageNum: ${pageNum}, pageSize: ${pageSize}`)
-      return Promise.reject()
-    }
     if (!this.dataItems.length) {
       return Promise.resolve(EmptyPageData)
     }
 
     this.filter(filter)
     this.sort(sort)
 
-    const startIndex = pageSize * (pageNum - 1)
-    const endIndex = startIndex + pageSize
+    let paged = this.sorted
+    if (pageNum > 0 && pageSize > 0) {
+      const startIndex = pageSize * (pageNum - 1)
+      const endIndex = startIndex + pageSize
 
-    if (startIndex >= this.dataItems.length) {
-      console.warn(`ClientSideDataRepository - getPage - pageNum exceeds data length`)
-      return Promise.resolve(EmptyPageData)
+      if (startIndex >= this.dataItems.length) {
+        console.warn(`ClientSideDataRepository - getPage - pageNum exceeds data length`)
+        return Promise.resolve(EmptyPageData)
+      }
+
+      paged = this.sorted.slice(startIndex, endIndex)
     }
 
     return Promise.resolve({
       totalItems: this.filtered.length,
-      dataItems: this.sorted.slice(startIndex, endIndex),
+      dataItems: paged,
     })
   }
 }
 
+/**
+ * @description Request data interface sent by the {@link ServerSideDataService}. This can be modified before
+ * the HTTP request is sent using the {@link BeforeRequestHandler} callback on {@link ServerSideDataServiceOptions}.
+ * @see {@link https://github.com/nruffing/data-grid-vue-dotnet/blob/main/DataGridVueDotnet/PageDataRequest.cs | dotnet model}
+ */
 export interface PageDataRequest {
+  /**
+   * @description The page number for the page to load starting with `1` for the first page.
+   * If the data grid is not set configured to be pageable with the {@link DataGridVueGrid.paged}
+   * prop then this will always be `-1`.
+   */
   pageNum: number
+
+  /**
+   * @description The maximum number of data items to display on each page. If the data grid is
+   * not set configured to be pageable with the {@link DataGridVueGrid.paged} prop then this
+   * will always be `-1`.
+   */
   pageSize: number
+
+  /**
+   * @description The current colomn sort definitions in the order in which they should be applied.
+   */
   sort: Sort[]
+
+  /**
+   * @description The current filter definition or undefined if no filter is set.
+   */
   filter: Filter | undefined
 }
 
+/**
+ * Callback type to change the {@link https://developer.mozilla.org/docs/Web/API/Request | Request}
+ * object before it is sent to the server from the built-in server side data service. This is useful
+ * when you need to map the {@link PageDataRequest} to a different data contract.
+ * @see {@link https://www.nuget.org/packages/DataGridVueDotnet/0.0.1-alpha | dotnet IQueryable helpers}
+ */
 export type BeforeRequestHandler = (request: Request, body: PageDataRequest) => Promise<Request>
+
+/**
+ * Callback type to change the {@link https://developer.mozilla.org/docs/Web/API/Response | Response}
+ * object before it is handled by the data grid from the built-in server side data service.
+ * This is useful when you need to map the servers response data back to {@link PageData}.
+ * @see {@link https://www.nuget.org/packages/DataGridVueDotnet/0.0.1-alpha | dotnet IQueryable helpers}
+ */
 export type ResponseHandler = (response: Response) => Promise<PageData>
+
+/**
+ * @description Options to configure the built-in server-side data service including the POST url and optional
+ * callbacks to alter the data format of the request and response allowing. This allows the built-in data service
+ * to handle the data contract of any server.
+ * @see {@link ServerSideDataService}
+ * @see {@link https://www.nuget.org/packages/DataGridVueDotnet/0.0.1-alpha | dotnet IQueryable helpers}
+ */
 export interface ServerSideDataServiceOptions {
+  /**
+   * @description The full HTTP/HTTPS url to send the POST request.
+   * Use {@link beforeRequest} callback to alter the HTTP verb or headers.
+   */
   postRoute?: string | URL
+
+  /**
+   * Optional callback to change the {@link https://developer.mozilla.org/docs/Web/API/Request | Request}
+   * object before it is sent to the server. This is useful when you need to map the {@link PageDataRequest}
+   * to a different data contract.
+   */
   beforeRequest?: BeforeRequestHandler
+
+  /**
+   * Optional callback to change the {@link https://developer.mozilla.org/docs/Web/API/Response | Response}
+   * object before it is handled by the data grid. This is useful when you need to map the servers response
+   * data back to {@link PageData}.
+   */
   responseHandler?: ResponseHandler
 }
 
+/**
+ * @description The server-side {@link DataService} used when {@link DataGridVueGrid.serverSideOptions} is specified.
+ */
 export class ServerSideDataService implements DataService {
   options: ServerSideDataServiceOptions
 

lib/Sort.ts

@@ -1,18 +1,47 @@
 import { DataType } from './DataGridVue'
 
+/**
+ * @description Grid-level sort options. The grid must be set as sortable for any
+ *  column level sort options to take effect.
+ */
 export interface SortOptions {
+  /**
+   * @description Whether the grid should be sortable.
+   */
   sortable: boolean
+
+  /**
+   * @description Whether more then one column can be sorted at once.
+   */
   multiColumn: boolean
 }
 
+/**
+ * @description Whether a sort is ascending or descending.
+ */
 export enum SortType {
   ascending = 0,
   descending = 1,
 }
 
+/**
+ * @description Column sort definition.
+ */
 export interface Sort {
+  /**
+   * @description The {@link Column}.{@link Field.fieldName} that the data is being sorted by.
+   */
   fieldName: string
+
+  /**
+   * @description The {@link Column.dataType} for the column being sorted.
+   * @see {@link DataType}
+   */
   dataType: DataType
+
+  /**
+   * @description The {@link SortType} for the sort (i.e. ascending or descending).
+   */
   type: SortType
 }
 

lib/components/ColumnSelectionItem.vue

@@ -18,10 +18,17 @@ import { type PropType, defineComponent } from 'vue'
 import type { Column } from '../DataGridVue'
 import Formatter from '../Formatter'
 
-/**@group Components */
+/**
+ * @group Components
+ * @description Column toggle item displayed in the column selected menu.
+ * @see {@link DataGridVueGrid.showColumnSelection}
+ */
 export default defineComponent({
   name: 'ColumnSelectionItem',
   props: {
+    /**
+     * @description The {@link Column} to show or hide.
+     */
     column: {
       type: Object as PropType<Column>,
       required: true,