Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Ag grid built in cell editor support
- Fix editable-cell input padding - Fix long text cell overflow - Add agLargeTextCellEditor support - Add theme support for agSelectCellEditor - Add agRichSelectCellEditor support - Add site doc example - Enable enterprise feature on site
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| --- | ||
| "@salt-ds/ag-grid-theme": minor | ||
| --- | ||
|
|
||
| - Added theme support for several built-in ag grid provided editors | ||
| - `agLargeTextCellEditor` | ||
| - `agSelectCellEditor` | ||
| - `agRichSelectCellEditor` | ||
| - `agNumberCellEditor` | ||
| - `agDateStringCellEditor` | ||
| - Fixed `input` padding within `.editable-cell` during editing | ||
| - Fixed long text overflow within `.editable-cell` when focused |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import { languages, shortColorData } from "./dataGridExampleDataCellEditors"; | ||
|
|
||
| const agProvidedCellEditorsExampleColumns = [ | ||
| { | ||
| headerName: "Boolean", | ||
| field: "checked", | ||
| cellDataType: "boolean", | ||
| cellRenderer: "agCheckboxCellRenderer", | ||
| cellEditor: "agCheckboxCellEditor", | ||
| editable: true, | ||
| }, | ||
| { | ||
| headerName: "Text", | ||
| field: "name", | ||
| cellEditor: "agTextCellEditor", | ||
| editable: true, | ||
| filter: true, | ||
| floatingFilter: true, | ||
| cellClass: ["editable-cell"], | ||
| }, | ||
| { | ||
| headerName: "Large Text", | ||
| field: "sentence", | ||
| cellEditor: "agLargeTextCellEditor", | ||
| cellEditorPopup: true, | ||
| editable: true, | ||
| filter: true, | ||
| floatingFilter: true, | ||
| cellClass: ["editable-cell"], | ||
| }, | ||
| { | ||
| headerName: "Select", | ||
| field: "lang", | ||
| cellEditor: "agSelectCellEditor", | ||
| cellEditorParams: { | ||
| values: languages, | ||
| valueListGap: 0, | ||
| }, | ||
| editable: true, | ||
| filter: true, | ||
| floatingFilter: true, | ||
| cellClass: ["editable-cell"], | ||
| }, | ||
| { | ||
| headerName: "Rich Select", | ||
| field: "color", | ||
| cellEditor: "agRichSelectCellEditor", | ||
| cellEditorParams: { | ||
| values: shortColorData, | ||
| valueListGap: 0, | ||
| allowTyping: true, | ||
| filterList: true, | ||
| highlightMatch: true, | ||
| }, | ||
| editable: true, | ||
| filter: true, | ||
| floatingFilter: true, | ||
| cellClass: ["editable-cell"], | ||
| }, | ||
| { | ||
| headerName: "Number", | ||
| field: "count", | ||
| cellEditor: "agNumberCellEditor", | ||
| cellEditorParams: { | ||
| min: 0, | ||
| max: 100, | ||
| }, | ||
| // Right aligns header | ||
| type: "numericColumn", | ||
| editable: true, | ||
| filter: true, | ||
| floatingFilter: true, | ||
| cellClass: ["numeric-cell", "editable-cell"], | ||
| }, | ||
| { | ||
| headerName: "Date", | ||
| field: "date", | ||
| cellDataType: "dateString", | ||
| cellEditor: "agDateStringCellEditor", | ||
| cellEditorParams: { | ||
| min: "2000-01-01", | ||
| max: "2019-12-31", | ||
| }, | ||
| editable: true, | ||
| filter: true, | ||
| floatingFilter: true, | ||
| cellClass: ["editable-cell"], | ||
| }, | ||
| ]; | ||
|
|
||
| export default agProvidedCellEditorsExampleColumns; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| export const languages = [ | ||
| "English", | ||
| "Spanish", | ||
| "French", | ||
| "Portuguese", | ||
| "(other)", | ||
| ] as const; | ||
| export const sentences = [ | ||
| "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.", | ||
| "Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.", | ||
| "Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.", | ||
| "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.", | ||
| "Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.", | ||
| "In porttitor. Donec laoreet nonummy augue.", | ||
| "Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc.", | ||
| "Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede.", | ||
| "Suspendisse dapibus lorem pellentesque magna. Integer nulla.", | ||
| "Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien.", | ||
| "Donec ut est in lectus consequat consequat. Etiam eget dui. Aliquam erat volutpat.", | ||
| ]; | ||
| export const shortColorData = [ | ||
| "Baby blue", | ||
| "Black", | ||
| "Blue", | ||
| "Brown", | ||
| "Green", | ||
| "Orange", | ||
| "Pink", | ||
| "Purple", | ||
| "Red", | ||
| "White", | ||
| "Yellow", | ||
| ]; | ||
|
|
||
| export const currencyList = [ | ||
| "USD", | ||
| "EUR", | ||
| "JPY", | ||
| "GBP", | ||
| "CHF", | ||
| "CAD", | ||
| "AUD", | ||
| "NZD", | ||
| "ZAR", | ||
| ]; | ||
|
|
||
| export const dataGridExampleDataCellEditors = [ | ||
| { | ||
| checked: false, | ||
| name: currencyList[0], | ||
| color: shortColorData[0], | ||
| lang: languages[0], | ||
| sentence: sentences[0], | ||
| count: 10, | ||
| date: "20/05/2009", | ||
| }, | ||
| { | ||
| checked: false, | ||
| name: currencyList[1], | ||
| color: shortColorData[1], | ||
| lang: languages[1], | ||
| sentence: sentences[1], | ||
| count: 50, | ||
| date: "20/05/2009", | ||
| }, | ||
| { | ||
| checked: true, | ||
| name: currencyList[2], | ||
| color: shortColorData[2], | ||
| lang: languages[2], | ||
| sentence: sentences[2], | ||
| count: 80, | ||
| date: "20/05/2009", | ||
| }, | ||
| { | ||
| checked: false, | ||
| name: currencyList[3], | ||
| color: shortColorData[3], | ||
| lang: languages[3], | ||
| sentence: sentences[3], | ||
| count: 55, | ||
| date: "20/05/2009", | ||
| }, | ||
| { | ||
| checked: false, | ||
| name: currencyList[4], | ||
| color: shortColorData[4], | ||
| lang: languages[4], | ||
| sentence: sentences[4], | ||
| count: 79, | ||
| date: "20/05/2009", | ||
| }, | ||
| ] as const; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import type { | ||
| ValueFormatterLiteParams, | ||
| ValueParserLiteParams, | ||
| } from "ag-grid-community"; | ||
| import { AgGridReact, type AgGridReactProps } from "ag-grid-react"; | ||
| import agProvidedCellEditorsExampleColumns from "../dependencies/agProvidedCellEditorsExampleColumns"; | ||
| import { dataGridExampleDataCellEditors } from "../dependencies/dataGridExampleDataCellEditors"; | ||
| import { useAgGridHelpers } from "../dependencies/useAgGridHelpers"; | ||
|
|
||
| // https://www.ag-grid.com/javascript-data-grid/cell-data-types/#date-as-string-data-type-definition | ||
| const dateString = { | ||
| baseDataType: "dateString" as const, | ||
| extendsDataType: "dateString" as const, | ||
| valueParser: ( | ||
| params: ValueParserLiteParams< | ||
| (typeof dataGridExampleDataCellEditors)[number], | ||
| string | ||
| >, | ||
| ) => | ||
| params.newValue?.match("\\d{2}/\\d{2}/\\d{4}") ? params.newValue : null, | ||
| valueFormatter: ( | ||
| params: ValueFormatterLiteParams< | ||
| (typeof dataGridExampleDataCellEditors)[number], | ||
| string | ||
| >, | ||
| ) => (params.value == null ? "" : params.value), | ||
| dataTypeMatcher: (value: any) => | ||
| typeof value === "string" && !!value.match("\\d{2}/\\d{2}/\\d{4}"), | ||
| dateParser: (value: string | undefined) => { | ||
| if (value == null || value === "") { | ||
| return undefined; | ||
| } | ||
| const dateParts = value.split("/"); | ||
| return dateParts.length === 3 | ||
| ? new Date( | ||
| Number.parseInt(dateParts[2]), | ||
| Number.parseInt(dateParts[1]) - 1, | ||
| Number.parseInt(dateParts[0]), | ||
| ) | ||
| : undefined; | ||
| }, | ||
| dateFormatter: (value: Date | undefined) => { | ||
| if (value == null) { | ||
| return undefined; | ||
| } | ||
| const date = String(value.getDate()); | ||
| const month = String(value.getMonth() + 1); | ||
| return `${date.length === 1 ? `0${date}` : date}/${month.length === 1 ? `0${month}` : month}/${value.getFullYear()}`; | ||
| }, | ||
| }; | ||
|
|
||
| export const ProvidedCellEditors = (props: AgGridReactProps) => { | ||
| const { agGridProps, containerProps } = useAgGridHelpers(); | ||
|
|
||
| return ( | ||
| <div {...containerProps}> | ||
| <AgGridReact | ||
| {...agGridProps} | ||
| {...props} | ||
| columnDefs={agProvidedCellEditorsExampleColumns} | ||
| rowData={[...dataGridExampleDataCellEditors]} | ||
| dataTypeDefinitions={{ dateString }} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.