diff --git a/.prettierrc b/.prettierrc
index 0f4f09ae3..d62868362 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,7 @@
{
"useTabs": false,
"tabWidth": 2,
- "printWidth": 130,
+ "printWidth": 140,
"singleQuote": true,
"trailingComma": "es5",
"overrides": [
@@ -12,4 +12,4 @@
}
}
]
-}
\ No newline at end of file
+}
diff --git a/demos/vue/src/App.vue b/demos/vue/src/App.vue
index 227b62156..c5f47ed9d 100644
--- a/demos/vue/src/App.vue
+++ b/demos/vue/src/App.vue
@@ -51,13 +51,9 @@ provide('i18next', useTranslation().i18next);
📘 Documentation
- {{ route.name }}
+ {{
+ route.name
+ }}
diff --git a/demos/vue/src/Home.vue b/demos/vue/src/Home.vue
index 872c29382..9df80a1e3 100644
--- a/demos/vue/src/Home.vue
+++ b/demos/vue/src/Home.vue
@@ -8,15 +8,15 @@
Quick intro
One of the best JavaScript data grid
- SlickGrid which was originally developed by @mleibman
- is now available to Vue. I have tried, and used, a few data grids and SlickGrid beats most of them in terms of functionalities
- and performance (it can even handle a million rows).
+ SlickGrid which was originally developed by @mleibman is now
+ available to Vue. I have tried, and used, a few data grids and SlickGrid beats most of them in terms of functionalities and performance
+ (it can even handle a million rows).
Documentation
The documentation is powered by GitBook and can be found at this link
- Slickgrid-Vue - Documentation , so be sure to consult
- it before opening any new issue.
+ Slickgrid-Vue - Documentation , so be sure to consult it before
+ opening any new issue.
The
HOWTO - Quick Start
diff --git a/demos/vue/src/components/CustomPagerComponent.vue b/demos/vue/src/components/CustomPagerComponent.vue
index 9631fcd41..beed379a7 100644
--- a/demos/vue/src/components/CustomPagerComponent.vue
+++ b/demos/vue/src/components/CustomPagerComponent.vue
@@ -11,9 +11,7 @@ let _subscriptions: Subscription[] = [];
const elm = ref();
const currentPagination = ref({} as PaginationMetadata);
-const isLeftPaginationDisabled = computed(
- () => currentPagination.value.pageNumber === 1 || currentPagination.value.totalItems === 0
-);
+const isLeftPaginationDisabled = computed(() => currentPagination.value.pageNumber === 1 || currentPagination.value.totalItems === 0);
const isRightPaginationDisabled = computed(
() => currentPagination.value.pageNumber === currentPagination.value.pageCount || currentPagination.value.totalItems === 0
);
@@ -129,19 +127,13 @@ defineExpose({
Page
- {{
- currentPagination?.pageNumber
- }}
+ {{ currentPagination?.pageNumber }}
of
{{ currentPagination?.pageCount }}
- Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag.
- Note that it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExcelExportOptions" or
- "TextExportOptions" or the column definition)
+ Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag. Note that
+ it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExcelExportOptions" or "TextExportOptions"
+ or the column definition)
This example also has auto-resize enabled, and we also demo how you can pause the resizer if you wish to
diff --git a/demos/vue/src/components/Example03.vue b/demos/vue/src/components/Example03.vue
index 36af23bde..f59524403 100644
--- a/demos/vue/src/components/Example03.vue
+++ b/demos/vue/src/components/Example03.vue
@@ -637,12 +637,7 @@ function vueGridReady(grid: SlickgridVueInstance) {
Example 3: Editors / Delete
-
+
@@ -668,13 +663,13 @@ function vueGridReady(grid: SlickgridVueInstance) {
Inline Editors requires "enableCellNavigation: true" (not sure why though)
- Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag.
- Note that it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExcelExportOptions" or
- "TextExportOptions" or the column definition)
+ Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag. Note that
+ it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExcelExportOptions" or "TextExportOptions"
+ or the column definition)
- Support of "collectionAsync" is possible, click on "Clear Filters/Sorting" then add/delete item(s) and look at
- "Prerequisites" Select Filter
+ Support of "collectionAsync" is possible, click on "Clear Filters/Sorting" then add/delete item(s) and look at "Prerequisites"
+ Select Filter
@@ -715,11 +710,7 @@ function vueGridReady(grid: SlickgridVueInstance) {
-
+
Clear Filters
Add item
-
- Delete item
-
+ Delete item
-
+
Dynamically Duplicate Title Column
diff --git a/demos/vue/src/components/Example04.vue b/demos/vue/src/components/Example04.vue
index c7c1cd066..42cb1d821 100644
--- a/demos/vue/src/components/Example04.vue
+++ b/demos/vue/src/components/Example04.vue
@@ -355,12 +355,7 @@ function vueGridReady(grid: SlickgridVueInstance) {
Example 4: Client Side Sort/Filter
-
+
@@ -387,22 +382,19 @@ function vueGridReady(grid: SlickgridVueInstance) {
Example: >100 ... >=2001-01-01 ... >02/28/17
- Note: For filters to work properly (default is string), make sure to provide a FieldType (type is against the
- dataset, not the Formatter)
+ Note: For filters to work properly (default is string), make sure to provide a FieldType (type is against the dataset, not
+ the Formatter)
Date Filters
- FieldType of dateUtc/date (from dataset) can use an extra option of "filterSearchType" to let user filter more easily.
- For example, in the "UTC Date" field below, you can type ">02/28/2017", also when dealing with UTC you have to take
- the time difference in consideration.
+ FieldType of dateUtc/date (from dataset) can use an extra option of "filterSearchType" to let user filter more easily. For
+ example, in the "UTC Date" field below, you can type ">02/28/2017", also when dealing with UTC you have to take the time
+ difference in consideration.
-
- On String filters, (*) can be used as startsWith (Hello* => matches "Hello Word") ... endsWith (*Doe => matches: "John
- Doe")
-
+ On String filters, (*) can be used as startsWith (Hello* => matches "Hello Word") ... endsWith (*Doe => matches: "John Doe")
Custom Filter are now possible, "Description" column below, is a customized InputFilter with different placeholder. See
-
+
Clear Filters
-
+
Clear Sorting
diff --git a/demos/vue/src/components/Example05.vue b/demos/vue/src/components/Example05.vue
index be41ff791..89dc7fcad 100644
--- a/demos/vue/src/components/Example05.vue
+++ b/demos/vue/src/components/Example05.vue
@@ -160,9 +160,7 @@ function displaySpinner(isProcessing: boolean, isError?: boolean) {
if (isError) {
status.value = { text: 'ERROR!!!', class: 'alert alert-danger' };
} else {
- status.value = isProcessing
- ? { text: 'loading', class: 'alert alert-warning' }
- : { text: 'finished', class: 'alert alert-success' };
+ status.value = isProcessing ? { text: 'loading', class: 'alert alert-warning' } : { text: 'finished', class: 'alert alert-success' };
}
}
@@ -517,26 +515,17 @@ function vueGridReady(grid: SlickgridVueInstance) {
code
-
+
Use it when you need to support Pagination with a OData endpoint (for simple JSON, use a regular grid)
- Take a look at the (
Wiki documentation )
+ Take a look at the (
Wiki documentation )
-
- Only "Name" field is sortable for the demo (because we use JSON files), however "multiColumnSort: true" is also supported
-
+ Only "Name" field is sortable for the demo (because we use JSON files), however "multiColumnSort: true" is also supported
This example also demos the Grid State feature, open the console log to see the changes
String column also support operator (>, >=, <, <=, <>, !=, =, ==, *)
@@ -549,15 +538,12 @@ function vueGridReady(grid: SlickgridVueInstance) {
OData Service could be replaced by other Service type in the future (GraphQL or whichever you provide)
You can also preload a grid with certain "presets" like Filters / Sorters / Pagination
- Wiki - Grid Preset
+ Wiki - Grid Preset
- NOTE: For demo purposes, the last column (filter & sort) will always throw an error and
- its only purpose is to demo what would happen when you encounter a backend server error (the UI should rollback to
- previous state before you did the action). Also changing Page Size to 50,000 will also throw which again is for demo
- purposes.
+ NOTE: For demo purposes, the last column (filter & sort) will always throw an error and its only
+ purpose is to demo what would happen when you encounter a backend server error (the UI should rollback to previous state before you
+ did the action). Also changing Page Size to 50,000 will also throw which again is for demo purposes.
@@ -591,11 +577,7 @@ function vueGridReady(grid: SlickgridVueInstance) {
Set Filters Dynamically
-
+
Set Sorting Dynamically
@@ -625,33 +607,15 @@ function vueGridReady(grid: SlickgridVueInstance) {
-
+
Enable Count (add to OData query)
-
+
Enable Select (add to OData query)
-
+
Enable Expand (add to OData query)
diff --git a/demos/vue/src/components/Example06.vue b/demos/vue/src/components/Example06.vue
index f22801d3b..54e9d668f 100644
--- a/demos/vue/src/components/Example06.vue
+++ b/demos/vue/src/components/Example06.vue
@@ -467,28 +467,17 @@ function vueGridReady(grid: SlickgridVueInstance) {
code
-
+
Use it when you need to support Pagination with a GraphQL endpoint (for simple JSON, use a regular grid).
-
Take a look at the (
Wiki docs )
+
Take a look at the (
Wiki docs )
-
- (*) NO DATA SHOWN - just change filters & page and look at the "GraphQL Query" changing
-
-
- Only "Name" field is sortable for the demo (because we use JSON files), however "multiColumnSort: true" is also supported
-
+ (*) NO DATA SHOWN - just change filters & page and look at the "GraphQL Query" changing
+ Only "Name" field is sortable for the demo (because we use JSON files), however "multiColumnSort: true" is also supported
String column also support operator (>, >=, <, <=, <>, !=, =, ==, *)
The (*) can be used as startsWith (ex.: "abc*" => startsWith "abc") / endsWith (ex.: "*xyz" => endsWith "xyz")
@@ -496,19 +485,15 @@ function vueGridReady(grid: SlickgridVueInstance) {
You can also preload a grid with certain "presets" like Filters / Sorters / Pagination
- Wiki - Grid Preset
+ Wiki - Grid Preset
- Also note that the column Name has a filter with a custom %% operator that behaves like an SQL LIKE operator supporting %
- wildcards.
+ Also note that the column Name has a filter with a custom %% operator that behaves like an SQL LIKE operator supporting % wildcards.
Depending on your configuration, your GraphQL Server might already support regex querying (e.g. Hasura
- _regex )
- or you could add your own implementation (e.g. see this SO
- Question ).
+ _regex ) or you
+ could add your own implementation (e.g. see this SO Question ).
@@ -533,25 +518,13 @@ function vueGridReady(grid: SlickgridVueInstance) {
Clear all Filter & Sorts
-
+
Set Filters Dynamically
-
+
Set Sorting Dynamically
-
+
Reset Original Presets
Server Delay:
diff --git a/demos/vue/src/components/Example07.vue b/demos/vue/src/components/Example07.vue
index f332ec08d..4659ba733 100644
--- a/demos/vue/src/components/Example07.vue
+++ b/demos/vue/src/components/Example07.vue
@@ -246,19 +246,14 @@ function vueGrid2Ready(grid: SlickgridVueInstance) {
code
-
+
- This example demonstrates using the
Slick.Plugins.HeaderButtons plugin to easily add buttons to colum headers. These
- buttons can be specified directly in the column definition, and are very easy to configure and use. (
Slick.Plugins.HeaderButtons plugin to easily add buttons to colum headers. These buttons can
+ be specified directly in the column definition, and are very easy to configure and use. ( Wiki docs Mouse hover the 2nd column to see it's icon/command
For all the other columns, click on top-right red circle icon to enable highlight of negative numbers.
- Use override callback functions to change the properties of show/hide, enable/disable the menu or certain item(s) from the
- list
+ Use override callback functions to change the properties of show/hide, enable/disable the menu or certain item(s) from the list
These callbacks are: "itemVisibilityOverride", "itemUsabilityOverride"
diff --git a/demos/vue/src/components/Example08.vue b/demos/vue/src/components/Example08.vue
index 0a4311a4c..91a525a3e 100644
--- a/demos/vue/src/components/Example08.vue
+++ b/demos/vue/src/components/Example08.vue
@@ -211,12 +211,7 @@ function vueGridReady(grid: SlickgridVueInstance) {
code
-
+
@@ -229,19 +224,14 @@ function vueGridReady(grid: SlickgridVueInstance) {
>Wiki docs)
-
- Now enabled by default in the Global Grid Options, it will add the default commands of (hide column, sort asc/desc)
-
+ Now enabled by default in the Global Grid Options, it will add the default commands of (hide column, sort asc/desc)
Hover over any column header to see an arrow showing up on the right
Try Sorting (multi-sort) the 2 columns "Duration" and "% Complete" (the other ones are disabled)
-
- Try hiding any columns (you use the "Column Picker" plugin by doing a right+click on the header to show the column back)
-
+ Try hiding any columns (you use the "Column Picker" plugin by doing a right+click on the header to show the column back)
Note: The "Header Button" & "Header Menu" Plugins cannot be used at the same time
You can change the menu icon via SASS variables as shown in this demo (check all SASS variables)
- Use override callback functions to change the properties of show/hide, enable/disable the menu or certain item(s) from
- the list
+ Use override callback functions to change the properties of show/hide, enable/disable the menu or certain item(s) from the list
These callbacks are: "itemVisibilityOverride", "itemUsabilityOverride"
diff --git a/demos/vue/src/components/Example09.vue b/demos/vue/src/components/Example09.vue
index 88141917d..49b64196c 100644
--- a/demos/vue/src/components/Example09.vue
+++ b/demos/vue/src/components/Example09.vue
@@ -325,19 +325,14 @@ function vueGridReady(grid: SlickgridVueInstance) {
code
-
+
- This example demonstrates using the
Slick.Controls.GridMenu plugin to easily add a Grid Menu (aka hamburger menu) on
- the top right corner of the grid.
+ This example demonstrates using the
Slick.Controls.GridMenu plugin to easily add a Grid Menu (aka hamburger menu) on the top
+ right corner of the grid.
(
Wiki docs )
@@ -346,10 +341,7 @@ function vueGridReady(grid: SlickgridVueInstance) {
By default the Grid Menu shows all columns which you can show/hide them
You can configure multiple custom "commands" to show up in the Grid Menu and use the "onGridMenuCommand()" callback
-
- Doing a "right + click" over any column header will also provide a way to show/hide a column (via the Column Picker
- Plugin)
-
+ Doing a "right + click" over any column header will also provide a way to show/hide a column (via the Column Picker Plugin)
You can change the icons of both picker via SASS variables as shown in this demo (check all SASS variables)
You can also show the Grid Menu anywhere on your page
diff --git a/demos/vue/src/components/Example10.vue b/demos/vue/src/components/Example10.vue
index 26eaf5ed0..cff6e7863 100644
--- a/demos/vue/src/components/Example10.vue
+++ b/demos/vue/src/components/Example10.vue
@@ -333,12 +333,7 @@ function vueGrid2Ready(grid: SlickgridVueInstance) {
code
-
+
@@ -353,8 +348,8 @@ function vueGrid2Ready(grid: SlickgridVueInstance) {
Single Select, you can click on any cell to make the row active
Multiple Selections, you need to specifically click on the checkbox to make 1 or more selections
- NOTE: Any Row Selection(s) will be reset when using Pagination and changing Page (you will need to set it back manually if
- you want it back)
+ NOTE: Any Row Selection(s) will be reset when using Pagination and changing Page (you will need to set it back manually if you want
+ it back)
@@ -407,11 +402,7 @@ function vueGrid2Ready(grid: SlickgridVueInstance) {
-
+
diff --git a/demos/vue/src/components/Example11.vue b/demos/vue/src/components/Example11.vue
index 60c6756e9..cc06ed78b 100644
--- a/demos/vue/src/components/Example11.vue
+++ b/demos/vue/src/components/Example11.vue
@@ -1,13 +1,5 @@