(element)\r\n .schema(schema)\r\n .rows(...)\r\n .onEditRows(async (rows) => {\r\n console.log(\"new changes\", rows)\r\n return true // return false (or nothing/void) to discard changes\r\n })\r\n ```\r\n\r\n---\r\n\r\n\r\n\r\n## Data Types\r\n\r\nSix data types are supported by grid. Which means:\r\n\r\n- The grid has default cell renderer for each type.\r\n- The grid has default cell editor for each type.\r\n- The grid has default filter for each type.\r\n- The grid has default sorting mechanism for each type.\r\n\r\n\r\n\r\nNote : If you want to use the default grid components for a column, you need to specify the column's type using the `Schema.Field.Type.Name` property. This allows the grid to determine which renderers, editors, and filters to use.\r\n\r\n
\r\n\r\n\r\n\r\n- ### Int\r\n\r\n > The **Int** type represents numeric value\r\n > \r\n\r\n- ### String\r\n\r\n The **String** type represents text value\r\n \r\n\r\n- ### Bit\r\n\r\n The **Bit** type represents binary value. grid displays a checkbox as cell renderer and a two-option dropdown for filtering (with values `true`/`false`)\r\n \r\n\r\n- ### Date\r\n\r\n The **Date** type represents a date value. The grid tries to format the given value using the `Schema.Field.Properties.Format`. If no format is provided, the grid uses its default format to parse and render the value.\r\n\r\n - default date format : `YYYY/MM/DD`\r\n \r\n\r\n- ### Time\r\n\r\n The **Time** type represents a time value. The grid tries to format the given value using the `Schema.Field.Properties.Format`. If no format is provided, the grid uses its default format to parse and render the value.\r\n\r\n - default time format : `HHHH:mm:ss`\r\n \r\n\r\n- ### List\r\n The **List** type format represents a specific set of values that are available for that column. It's like a value source for a column. grid displays dropdown while editing **List** columns. list source must be defined through `Schema.Field.Type.Source` property. It can be a string (which represents an external source endpoint) or it can be an array of values (`TAutoCompleteItem[]`)\r\n\r\n\r\n\r\nNote : If column source is an endpoint string, then columnSource function should be provided to grid, in this way grid can call columnSource with given endpoint to fetch items.\r\n\r\n
\r\n\r\n\r\n\r\n- ### Object\r\n -incomplete-\r\n\r\n---\r\n\r\n\r\n\r\n## All Build Options\r\n\r\n| Option Name | Description |\r\n| --------------------- | ------------------------------------------------------------------------------------------------------------------ |\r\n| build | builds the grid with given options and return an instance |\r\n| contextMenu | define context menu items |\r\n| suppressContextMenu | disable context menu |\r\n| cellRenderers | define custom cell renderer for columns |\r\n| cellEditors | define custom cell editor for columns |\r\n| validation | define validation rules for row editing |\r\n| onCellClick | cell is clicked |\r\n| onCellDoubleClick | cell is double clicked |\r\n| onRowClick | row is clicked |\r\n| onRowDoubleClick | row is double clicked |\r\n| onEditRows | row editing finished. return true to submit changes or false to discard changes. |\r\n| onDeleteRows | deleting a row. return true to confirm deleting or false to prevent from deleting. |\r\n| onSchemaChange | grid' schema has changed. The reason can be column resizing, change columns visibility or change columns ordering. |\r\n| rowClassRules | define rules to apply css classes to row elements. |\r\n| rowCssRules | define rules to apply css properties to row elements. |\r\n| cellCssRules | define rules to apply css properties to cell elements. |\r\n| localize | define custom localization |\r\n| schema | RDT schema object |\r\n| fullRowEdit | enable full row editing |\r\n| defaultSelect | select first row by default |\r\n| selection | set selection config |\r\n| pagination | set pagination mode (\"infinite-scroll\" \"pagination\") |\r\n| actionBar | define action bar component |\r\n| detailPanelComponent | define detail panel component for rows |\r\n| title | set title for grid |\r\n| isRowMaster | if returns false, then detail panel component won't show for that specific row. |\r\n| suppressToolbar | disable toolbar |\r\n| toolbarActions | define custom toolbar actions |\r\n| actions | define custom actions for 'actions column' |\r\n| emptyPinnedRowOptions | empty pinned row options! |\r\n| columnSource | source function that grid uses to fetch dropdown values for `List` type columns |\r\n| nativeColumnDefs | AgGrid ColDef definitions for columns |\r\n| defaultColDefs | AgGrid defaultColDef |\r\n| settings | It is possible to pass most of the above parameters through `settings` function. |\r\n\r\n---\r\n\r\n\r\n\r\n## Methods\r\n\r\n| Method Name | Description |\r\n| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| getSchema | returns initial schema object |\r\n| getCurrentSchema | returns current schema object |\r\n| getSelectedRows | returns an array of selected rows |\r\n| updateRows | directly update rows with given data, regardless of validations and onEditRows callback |\r\n| selectRows | select rows |\r\n| deselectRows | deselect rows |\r\n| deleteRows | delete rows. If onDeleteRows returns true, the rows will be removed from the grid. However, if onDeleteRows returns false, then the deletion process will be canceled. If onDeleteRows is not defined, the grid will continue deleting rows without asking for confirmation. |\r\n| setLoading | enable or disable grid's loading |\r\n| addOnSelectionChangeListener | subscribe to selection changes. |\r\n| removeOnSelectionChangeListener | unsubscribe to selection changes. |\r\n| setPageSize | change grid page size |\r\n| startEditing | enable editing for a given row |\r\n| stopEditing | finish editing. onEditRows will get call if it is provided. |\r\n| displayEmptyPinnedRow | display empty pinned row at the top of grid (above all the rows) |\r\n| hideEmptyPinnedRow | hide empty pinned row. inserted data will get removed from row. |\r\n| insertEmptyPinnedRowData | If inserted values are not valid, it does nothing. Otherwise it calls onAdd on emptyPinnedRowOptions (if provided), if onAdd function returns `true`, new data will get inserted in grid, otherwise it will get ignored. |\r\n| getEmptyPinnedRowData | returns current inserted data in the empty pinned row |\r\n| refreshToolbar | refresh toolbar component |\r\n| getElement | returns grid html container element |\r\n| startBulkUpdate | enable bulk-edit mode |\r\n| finishBulkUpdate | disable bulk-edit mode. onEditRows will gets called with changes. |\r\n| restoreRowInitialData | discard changed values while was editing and set row value to it's initial value. |\r\n| getRowDataKey | returns row unique key. |\r\n| getCurrentEditingRow | returns current editing row |\r\n| submitCurrentEditingRow | finish editing current row. |\r\n| isBulkEditEnabled | returns `true` if grid is in bulk-edit mode, otherwise returns `false` |\r\n| isRowEdited | developers-only-method |\r\n| setLatestAction | developers-only-method |\r\n| isOptionalColumn | developers-only-method |\r\n\r\n---\r\n\r\n\r\n\r\n## Selection\r\n\r\nGrid selection can be single-select or multiple-select.\r\n\r\n- to enable single-selection, selection mode must be equal to \"single\"\r\n- to enable multi-selection, selection mode must be equal to \"multiple\"\r\n- by default, grid shows checkbox for selection. it can be disabled by setting checkbox property to `false`.\r\n- for multi-selection grids, selectAll property can be set to `true` to display select all checkbox.\r\n\r\n### Schema\r\n\r\n```typescript\r\nconst schema: Schema = {\r\n fields: [\r\n {\r\n fieldName: \"id\",\r\n isKey: true,\r\n },\r\n {\r\n fieldName: \"firstName\",\r\n title: \"نام\",\r\n },\r\n {\r\n fieldName: \"lastName\",\r\n title: \"نام خانوادگی\",\r\n },\r\n {\r\n fieldName: \"age\",\r\n title: \"سن\",\r\n },\r\n ],\r\n filters: [],\r\n sorts: [],\r\n};\r\n```\r\n\r\n### Example: Single Select\r\n\r\n```typescript\r\nimport { LocalGrid } from \"@novin/cover-ag-grid-web\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new LocalGrid(element)\r\n .schema(schema)\r\n .rows(...)\r\n .selection({\r\n selection: \"single\",\r\n checkbox: true\r\n })\r\n .build()\r\n```\r\n\r\n### Example: Multiple Select\r\n\r\n```typescript\r\nimport { LocalGrid } from \"@novin/cover-ag-grid-web\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new LocalGrid(element)\r\n .schema(schema)\r\n .rows(...)\r\n .selection({\r\n selection: \"multiple\",\r\n checkbox: true,\r\n selectAll: true // optional\r\n })\r\n .build()\r\n```\r\n\r\n### Example: Keep Track Of Selection List\r\n\r\n```typescript\r\ntype OnSelectionChangeArgs = {\r\n selectedList: Array;\r\n};\r\ntype OnSelectionChange = (args: OnSelectionChangeArgs) => void;\r\n```\r\n\r\n```typescript\r\nimport { LocalGrid } from \"@novin/cover-ag-grid-web\"\r\nimport { OnSelectionChange } from \"@novin/cover-ag-grid-web/types\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new LocalGrid(element)\r\n .schema(schema)\r\n .rows(...)\r\n .selection({\r\n selection: \"multiple\",\r\n checkbox: true,\r\n selectAll: true // optional\r\n })\r\n .build()\r\n\r\nconst onSelectionChange: OnSelectionChange = ({ selectedList }) => {\r\n console.log(\"selection changed\", selectedList)\r\n}\r\n\r\ngrid.addOnSelectionChangeListener(onSelectionChange)\r\n\r\n```\r\n\r\n---\r\n\r\n\r\n\r\n## Pagination\r\n\r\n```typescript\r\ntype GridPaginationSetting = {\r\n paginationMode: \"infiniteScroll\" | \"pagination\";\r\n pageSize: number;\r\n};\r\n```\r\n\r\n### Example: Pagination\r\n\r\n```typescript\r\nimport { RemoteGrid } from \"@novin/cover-ag-grid-web\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new RemoteGrid(element)\r\n .schema(schema)\r\n .datasource(...)\r\n .pagination({\r\n paginationMode: \"infiniteScroll\", // or \"pagination\"\r\n pageSize: 20\r\n })\r\n .build()\r\n```\r\n\r\n---\r\n\r\n\r\n\r\n## Context Menu\r\n\r\n```typescript\r\ntype GetContextMenuItems = (\r\n params: GetContextMenuItemsParams\r\n) => ContextMenuItem[];\r\ntype GetContextMenuItemsParams = {\r\n gridInstance: LocalGrid | RemoteGrid;\r\n field: FieldProperty;\r\n rowData: TData;\r\n};\r\ntype ContextMenuItem = string | AgGrid.MenuItemDef;\r\n```\r\n\r\n### Example: Context Menu\r\n\r\n```typescript\r\nimport { LocalGrid } from \"@novin/cover-ag-grid-web\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new LocalGrid(element)\r\n .schema(schema)\r\n .rows(...)\r\n .contextMenu((params: GetContextMenuItemsParams) => {\r\n const { gridInstance, rowData, field } = params\r\n return [\r\n {\r\n name: rowData[field],\r\n action() {\r\n console.log({ rowData, field })\r\n }\r\n },\r\n {\r\n name: \"Edit Row\",\r\n action() {\r\n gridInstance.startEditing([rowData.userId])\r\n }\r\n }\r\n ]\r\n })\r\n```\r\n\r\n---\r\n\r\n\r\n\r\n## Event Listeners\r\n\r\nGrid supports variant of event listeners, based on Ag-Grid supported event listeners.\r\n\r\n- onCellClick\r\n- onCellDoubleClick\r\n- onRowClick\r\n- onRowDoubleClick\r\n\r\n```typescript\r\ntype OnCellClick = (data: TData, field: string | undefined) => void;\r\ntype OnRowClick = (data: TData) => void;\r\n```\r\n\r\n### Example: Grid Event Listeners\r\n\r\n```typescript\r\nimport { LocalGrid } from \"@novin/cover-ag-grid-web\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new LocalGrid(element)\r\n .schema(schema)\r\n .rows(...)\r\n .onCellClick(params => {\r\n console.log(\"onCellClick\", params)\r\n })\r\n .onCellDoubleClick(params => {\r\n console.log(\"onCellDoubleClick\", params)\r\n })\r\n .onRowClick(params => {\r\n console.log(\"onRowClick\", params)\r\n })\r\n .onRowDoubleClick(params => {\r\n console.log(\"onRowDoubleClick\", params)\r\n })\r\n .build()\r\n```\r\n\r\n---\r\n\r\n\r\n\r\n## Localization\r\n\r\n```typescript\r\ntype LocaleText = {\r\n submitEditAction?: string;\r\n cancelEditAction?: string;\r\n editRowAction?: string;\r\n restoreOriginRowDataAction?: string;\r\n deleteRowAction?: string;\r\n emptyCellPlaceholder?: string;\r\n requiredFieldError?: string;\r\n selectAll?: string;\r\n selectAllSearchResults?: string;\r\n searchOoo?: string;\r\n blanks?: string;\r\n noMatches?: string;\r\n filterOoo?: string;\r\n equals?: string;\r\n notEqual?: string;\r\n blank?: string;\r\n notBlank?: string;\r\n empty?: string;\r\n lessThan?: string;\r\n greaterThan?: string;\r\n lessThanOrEqual?: string;\r\n greaterThanOrEqual?: string;\r\n inRange?: string;\r\n inRangeStart?: string;\r\n inRangeEnd?: string;\r\n contains?: string;\r\n notContains?: string;\r\n startsWith?: string;\r\n endsWith?: string;\r\n dateFormatOoo?: string;\r\n andCondition?: string;\r\n orCondition?: string;\r\n applyFilter?: string;\r\n resetFilter?: string;\r\n clearFilter?: string;\r\n cancelFilter?: string;\r\n textFilter?: string;\r\n numberFilter?: string;\r\n dateFilter?: string;\r\n setFilter?: string;\r\n columns?: string;\r\n filters?: string;\r\n pivotMode?: string;\r\n groups?: string;\r\n rowGroupColumnsEmptyMessage?: string;\r\n values?: string;\r\n valueColumnsEmptyMessage?: string;\r\n pivots?: string;\r\n pivotColumnsEmptyMessage?: string;\r\n group?: string;\r\n rowDragRow?: string;\r\n rowDragRows?: string;\r\n loadingOoo?: string;\r\n noRowsToShow?: string;\r\n enabled?: string;\r\n pinColumn?: string;\r\n pinLeft?: string;\r\n pinRight?: string;\r\n noPin?: string;\r\n valueAggregation?: string;\r\n autosizeThiscolumn?: string;\r\n autosizeAllColumns?: string;\r\n groupBy?: string;\r\n ungroupBy?: string;\r\n addToValues?: string;\r\n removeFromValues?: string;\r\n addToLabels?: string;\r\n removeFromLabels?: string;\r\n resetColumns?: string;\r\n expandAll?: string;\r\n collapseAll?: string;\r\n copy?: string;\r\n ctrlC?: string;\r\n copyWithHeaders?: string;\r\n copyWithGroupHeaders?: string;\r\n paste?: string;\r\n ctrlV?: string;\r\n export?: string;\r\n csvExport?: string;\r\n excelExport?: string;\r\n sum?: string;\r\n min?: string;\r\n max?: string;\r\n none?: string;\r\n count?: string;\r\n avg?: string;\r\n filteredRows?: string;\r\n selectedRows?: string;\r\n totalRows?: string;\r\n totalAndFilteredRows?: string;\r\n more?: string;\r\n to?: string;\r\n of?: string;\r\n page?: string;\r\n nextPage?: string;\r\n lastPage?: string;\r\n firstPage?: string;\r\n previousPage?: string;\r\n pivotColumnGroupTotals?: string;\r\n pivotChartAndPivotMode?: string;\r\n pivotChart?: string;\r\n chartRange?: string;\r\n columnChart?: string;\r\n groupedColumn?: string;\r\n stackedColumn?: string;\r\n normalizedColumn?: string;\r\n barChart?: string;\r\n groupedBar?: string;\r\n stackedBar?: string;\r\n normalizedBar?: string;\r\n pieChart?: string;\r\n pie?: string;\r\n doughnut?: string;\r\n line?: string;\r\n xyChart?: string;\r\n scatter?: string;\r\n bubble?: string;\r\n areaChart?: string;\r\n area?: string;\r\n stackedArea?: string;\r\n normalizedArea?: string;\r\n histogramChart?: string;\r\n histogramFrequency?: string;\r\n combinationChart?: string;\r\n columnLineCombo?: string;\r\n AreaColumnCombo?: string;\r\n pivotChartTitle?: string;\r\n rangeChartTitle?: string;\r\n settings?: string;\r\n data?: string;\r\n format?: string;\r\n categories?: string;\r\n defaultCategory?: string;\r\n series?: string;\r\n xyValues?: string;\r\n paired?: string;\r\n axis?: string;\r\n navigator?: string;\r\n color?: string;\r\n thickness?: string;\r\n xType?: string;\r\n automatic?: string;\r\n category?: string;\r\n number?: string;\r\n time?: string;\r\n autoRotate?: string;\r\n xRotation?: string;\r\n yRotation?: string;\r\n ticks?: string;\r\n width?: string;\r\n height?: string;\r\n length?: string;\r\n padding?: string;\r\n spacing?: string;\r\n chart?: string;\r\n title?: string;\r\n titlePlaceholder?: string;\r\n background?: string;\r\n font?: string;\r\n top?: string;\r\n right?: string;\r\n bottom?: string;\r\n left?: string;\r\n labels?: string;\r\n size?: string;\r\n minSize?: string;\r\n maxSize?: string;\r\n legend?: string;\r\n position?: string;\r\n markerSize?: string;\r\n markerStroke?: string;\r\n markerPadding?: string;\r\n itemSpacing?: string;\r\n itemPaddingX?: string;\r\n itemPaddingY?: string;\r\n layoutHorizontalSpacing?: string;\r\n layoutVerticalSpacing?: string;\r\n strokeWidth?: string;\r\n lineDash?: string;\r\n offset?: string;\r\n offsets?: string;\r\n tooltips?: string;\r\n callout?: string;\r\n markers?: string;\r\n shadow?: string;\r\n blur?: string;\r\n xOffset?: string;\r\n yOffset?: string;\r\n lineWidth?: string;\r\n normal?: string;\r\n bold?: string;\r\n italic?: string;\r\n boldItalic?: string;\r\n predefined?: string;\r\n fillOpacity?: string;\r\n strokeOpacity?: string;\r\n histogramBinCount?: string;\r\n columnGroup?: string;\r\n barGroup?: string;\r\n pieGroup?: string;\r\n lineGroup?: string;\r\n scatterGroup?: string;\r\n areaGroup?: string;\r\n histogramGroup?: string;\r\n combinationGroup?: string;\r\n groupedColumnTooltip?: string;\r\n stackedColumnTooltip?: string;\r\n normalizedColumnTooltip?: string;\r\n groupedBarTooltip?: string;\r\n stackedBarTooltip?: string;\r\n normalizedBarTooltip?: string;\r\n pieTooltip?: string;\r\n doughnutTooltip?: string;\r\n lineTooltip?: string;\r\n groupedAreaTooltip?: string;\r\n stackedAreaTooltip?: string;\r\n normalizedAreaTooltip?: string;\r\n scatterTooltip?: string;\r\n bubbleTooltip?: string;\r\n histogramTooltip?: string;\r\n columnLineComboTooltip?: string;\r\n areaColumnComboTooltip?: string;\r\n customComboTooltip?: string;\r\n noDataToChart?: string;\r\n pivotChartRequiresPivotMode?: string;\r\n chartSettingsToolbarTooltip?: string;\r\n chartLinkToolbarTooltip?: string;\r\n chartUnlinkToolbarTooltip?: string;\r\n chartDownloadToolbarTooltip?: string;\r\n seriesChartType?: string;\r\n seriesType?: string;\r\n secondaryAxis?: string;\r\n ariaChecked?: string;\r\n ariaColumn?: string;\r\n ariaColumnGroup?: string;\r\n ariaColumnList?: string;\r\n ariaColumnSelectAll?: string;\r\n ariaDateFilterInput?: string;\r\n ariaDefaultListName?: string;\r\n ariaFilterColumnsInput?: string;\r\n ariaFilterFromValue?: string;\r\n ariaFilterInput?: string;\r\n ariaFilterList?: string;\r\n ariaFilterToValue?: string;\r\n ariaFilterValue?: string;\r\n ariaFilteringOperator?: string;\r\n ariaHidden?: string;\r\n ariaIndeterminate?: string;\r\n ariaInputEditor?: string;\r\n ariaMenuColumn?: string;\r\n ariaRowDeselect?: string;\r\n ariaRowSelectAll?: string;\r\n ariaRowToggleSelection?: string;\r\n ariaRowSelect?: string;\r\n ariaSearch?: string;\r\n ariaSortableColumn?: string;\r\n ariaToggleVisibility?: string;\r\n ariaUnchecked?: string;\r\n ariaVisible?: string;\r\n ariaSearchFilterValues?: string;\r\n ariaRowGroupDropZonePanelLabel?: string;\r\n ariaValuesDropZonePanelLabel?: string;\r\n ariaPivotDropZonePanelLabel?: string;\r\n ariaDropZoneColumnComponentDescription?: string;\r\n ariaDropZoneColumnValueItemDescription?: string;\r\n ariaDropZoneColumnGroupItemDescription?: string;\r\n ariaDropZoneColumnComponentAggFuncSeperator?: string;\r\n ariaDropZoneColumnComponentSortAscending?: string;\r\n ariaDropZoneColumnComponentSortDescending?: string;\r\n ariaLabelColumnMenu?: string;\r\n ariaLabelCellEditor?: string;\r\n ariaLabelDialog?: string;\r\n ariaLabelSelectField?: string;\r\n ariaLabelTooltip?: string;\r\n ariaLabelContextMenu?: string;\r\n ariaLabelSubMenu?: string;\r\n ariaLabelAggregationFunction?: string;\r\n thousandSeparator?: string;\r\n decimalSeparator?: string;\r\n};\r\n```\r\n\r\n### Example: Localization\r\n\r\n```typescript\r\nimport { LocalGrid } from \"@novin/cover-ag-grid-web\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new LocalGrid(element)\r\n .schema(schema)\r\n .rows(...)\r\n .localize({\r\n noRowsToShow: \"ردیفی یافت نشد\"\r\n })\r\n```\r\n\r\n---\r\n\r\n\r\n\r\n## Cell Renderers\r\n\r\nIt is possible to override default render behavior for cell renderers. You can implement custom cell renderer for fields or more generally, types.\r\n\r\n```typescript\r\ntype CellRenderer = {\r\n field: FieldProperty;\r\n renderer: typeof CustomCellRenderer;\r\n};\r\n\r\nabstract class CustomCellRenderer {\r\n abstract init(params: AgGrid.ICellRendererParams): void;\r\n abstract getGui(): HTMLElement;\r\n abstract refresh(params: AgGrid.ICellRendererParams): boolean;\r\n abstract destroy(): void;\r\n}\r\n```\r\n\r\n\r\n\r\nNote : Please to figuring out how to implement a custom cell renderer, checkout Ag-Grid official documentation.\r\n\r\n
\r\n\r\n\r\n\r\n## Cell Editors\r\n\r\nIt is possible to override default editor behavior for cell editors. You can implement custom cell editor for fields or more generally, types.\r\n\r\n```typescript\r\ntype CellEditor = {\r\n fieldOrType:\r\n | Field[\"fieldName\"]\r\n | \"string\"\r\n | \"number\"\r\n | \"boolean\"\r\n | \"date\"\r\n | \"time\"\r\n | \"object\"\r\n | \"list\";\r\n editor: any; // AgGrid custom editor component\r\n};\r\n```\r\n\r\n\r\n\r\nNote : Please to figuring out how to implement a custom cell editor, checkout Ag-Grid official documentation.\r\n\r\n
\r\n\r\n---\r\n\r\n\r\n\r\n## Action Bar\r\n\r\n### Example: Action Bar\r\n\r\n```typescript\r\nimport { LocalGrid } from \"@novin/cover-ag-grid-web\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new LocalGrid(element)\r\n .schema(...)\r\n .rows(...)\r\n .selection({\r\n selection: \"single\",\r\n checkbox: false\r\n })\r\n .actionBar((gridInstance) => {\r\n const container = document.createElement(\"div\");\r\n\r\n const addButton = document.createElement(\"button\");\r\n addButton.innerHTML = \"add\";\r\n addButton.onclick = () => gridInstance.displayEmptyPinnedRow();\r\n\r\n const removeButton = document.createElement(\"button\")\r\n removeButton.innerHTML = \"remove\"\r\n removeButton.onclick = () => {\r\n const selected = gridInstance.getSelectedRows()[0]\r\n if(selected) gridInstance.deleteRows([selected])\r\n }\r\n\r\n container.append(addButton, removeButton);\r\n\r\n return container;\r\n })\r\n .build();\r\n```\r\n\r\n---\r\n\r\n\r\n\r\n## Detail Panel\r\n\r\nit possible to render a html element as detail panel for rows.\r\n\r\n### Example: Detail Panel\r\n\r\n```typescript\r\nimport { LocalGrid } from \"@novin/cover-ag-grid-web\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new LocUsealGrid(element)\r\n .schema(...)\r\n .rows(...)\r\n .detailPanelComponent((data, gridInstance) => {\r\n const container = document.createElement(\"div\");\r\n container.innerHTML = `${data.firstName} + ${data.lastName} | ${data.age}`;\r\n return container;\r\n })\r\n .build()\r\n```\r\n\r\nUse `isRowMaster` callback to conditionally choose which rows have detail panel.\r\n\r\n---\r\n\r\n\r\n\r\n## Toolbar\r\n\r\n### Example: Custom Toolbar Action\r\n\r\n```typescript\r\nimport { LocalGrid } from \"@novin/cover-ag-grid-web\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new LocalGrid(element)\r\n .schema(...)\r\n .rows(...)\r\n .toolbarActions((defaults) => [\r\n ...defaults,\r\n {\r\n name: \"custom-toolbar-action\",\r\n icon: \"print\",\r\n async action(grid) {\r\n const selectedList = grid.getSelectedRows();\r\n console.log({ selectedList });\r\n },\r\n },\r\n ])\r\n .build()\r\n```\r\n\r\n---\r\n\r\n\r\n\r\n## Column Actions\r\n\r\n### Example: Column Actions\r\n\r\n```typescript\r\nimport { LocalGrid } from \"@novin/cover-ag-grid-web\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new LocalGrid(element)\r\n .schema(...)\r\n .rows(...)\r\n .actions((defaults) => [\r\n ...defaults,\r\n {\r\n title: \"print\",\r\n action(event) {\r\n const selectedList = event.grid.getSelectedRows();\r\n console.log({ selectedList });\r\n },\r\n },\r\n ])\r\n .build()\r\n```\r\n\r\n---\r\n\r\n\r\n\r\n## Styling\r\n\r\n\r\n\r\n- ### Example: Row Class Rules\r\n\r\n```typescript\r\nimport { LocalGrid } from \"@novin/cover-ag-grid-web\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new LocalGrid(element)\r\n .schema(...)\r\n .rows(...)\r\n .rowClassRules({\r\n \"disabled-row\": row => row.age >= 50\r\n })\r\n .build()\r\n```\r\n\r\n\r\n\r\n- ### Example: Row Css Rules\r\n\r\n```typescript\r\nimport { LocalGrid } from \"@novin/cover-ag-grid-web\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new LocalGrid(element)\r\n .schema(...)\r\n .rows(...)\r\n .rowCssRules([\r\n {\r\n rule(data, grid) {\r\n return data.age >= 50\r\n },\r\n styles: {\r\n color: \"gray\"\r\n }\r\n }\r\n ])\r\n .build()\r\n```\r\n\r\n\r\n\r\n- ### Example: Cell Css Rules\r\n\r\n```typescript\r\nimport { LocalGrid } from \"@novin/cover-ag-grid-web\"\r\nimport \"@novin/cover-ag-grid-web/dist/styles.css\"\r\n\r\nconst element = document.getElementById(\"my-grid\")\r\n\r\nconst grid = await new LocalGrid(element)\r\n .schema(...)\r\n .rows(...)\r\n .cellCssRules([\r\n {\r\n field: \"firstName\",\r\n rule(data, field, grid) {\r\n return data.firstName == \"John\"\r\n },\r\n styles: {\r\n fontWeight: \"bold\"\r\n }\r\n }\r\n ])\r\n .build()\r\n```\r\n\r\n---\r\n\r\n\r\n\r\n## Type of Grids\r\n\r\n\r\n\r\n- ### RemoteGrid\r\n\r\n Remote grids have external datasource for collecting rows to display in grid. a `datasource` function need to be provided for `RemoteGrid` class to fetch rows.\r\n\r\n Each action that requires loading new rows, calls `datasource` function. Like filtering, sorting, changing pagination...\r\n\r\n\r\n\r\n- ### LocalGrid\r\n\r\n Local grids have internal values (client-side) for rows.\r\n You can provide initial values by `rows(...)` function to grid or simply call `setRows(...)` after building grid instance.\r\n\r\n In local grids, all data handling happens in client-side. Like filtering, sorting and CRUD operations.\r\n\r\n---\r\n\r\n\r\n\r\n## Global Config\r\n\r\n- setCellCssRules\r\n- setCellEditors\r\n- setCellValidations\r\n- setColumnActions\r\n- setLocaleText\r\n- setSettings\r\n- setToolbarActions\r\n\r\n---\r\n","readmeFilename":"README.md"}