Slickgrid-React is a wrapper of the lightning fast & customizable SlickGrid datagrid, it also includes multiple Styling Themes
MIT License
Bot releases are visible (Hide)
Published by github-actions[bot] 6 months ago
This new release brings a lot of changes oriented toward better UI/UX, our SVG icons are now pure CSS and can be colorized like any other text via the native CSS color
property (which helps a lot to improve the Dark Mode Theme).
Another noticeable UI change is the migration of the date picker from Flatpickr to Vanilla-Calendar-Pro, this library is ESM, it has modern styling and an awesome UI/UX. Another change that is mostly internal but is also indirectly connected to the date picker is the migration from MomentJS to Tempo which is modern and is also packaged as ESM which is great for Tree Shaking.
Please remember that all packages of @slickgrid-universal
(v5.0.0
) and Slickgrid-React
(v5.0.0
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
also remember that Slickgrid-Universal monorepo is where the biggest portion of the code exists (~90%), so most of the commits are now happening on that side.
Published by github-actions[bot] 6 months ago
This new release adds 2x new grid options defaultEditorOptions
and defaultFilterOptions
so that user can define global Editor/Filter options instead of having to duplicate same options on each column editorOptions
/filterOptions
. An example is shown below.
defaultFilterOptions
, we use the same keys as the Editor (date
, select
, slider
, ...) but please note that these 3 filters options have combined options into 1 prop for compound & range filters (e.g. date
is for both compoundDate
and dateRange
filter options).this.gridOptions = {
defaultEditorOptions: {
autocompleter: { debounceWaitMs: 150 }, // auto-typed as AutocompleterOption
date: { minDate: 'today' },
longText: { cols: 50, rows: 5 }
}
}
Published by github-actions[bot] 7 months ago
This release will now work with multiple tooltips on the same cell (e.g. multiple buttons with icons like the "Action" column in Example 35).
exports
to pass "are the types wrong" (#314) (62ea969)Please remember that all packages of @slickgrid-universal
(v4.6.1
) and Slickgrid-React
(v4.6.1
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
Published by github-actions[bot] 7 months ago
This release upgrades multiple-select-vanilla
package, that I also maintained, with a much modern UI with the use of SVG icons. The SVG icons in that new select lib are now also written in pure CSS which helps for Dark Mode. Note however that the SVG icons are not yet pure CSS since that would introduce breaking changes in Slickgrid-Universal (a new major version will be pushed later to address that).
model
is now FilterConstructor
and shouldn't be newed (#310) (5f3f765)Published by github-actions[bot] 7 months ago
This release upgrades multiple-select-vanilla
package, that I also maintained, with a much modern UI with the use of SVG icons. The SVG icons in that new select lib are now also written in pure CSS which helps for Dark Mode. Note however that the SVG icons are not yet pure CSS since that would introduce breaking changes in Slickgrid-Universal (a new major version will be pushed later to address that).
model
is now FilterConstructor
and shouldn't be newed (#310) (5f3f765)Published by github-actions[bot] 8 months ago
This is probably a UX change that many people will be happy to receive, however there are important things to note as shown below.
darkMode
grid option, it will not auto-detect the color scheme from the browser (you can however easily do it yourself). There couple of reasons as to why that is a grid option, it mostly relate to the fact that a few features require creating certain DOM Elements that are appended to the body
(e.g. ColumnPicker, GridMenu, LongTextEditor, CompositeEditorModal, ...) and that requires extra code in place that SlickGrid will take care of it for you and for that reason it cannot be simple CSS classes.Also worth knowing that I also improved multiple-select-vanilla
by adding a new feature to replace tabIndex
by arrow navigation highlight. This feature will let you use the keyboard (up/down arrows) to navigate the select options and choose any of them (via Enter key) and all of that without losing your current focus (which is tabIndex
did not provide). This new feature should be a lot more UX friendly.
Please remember that all packages of @slickgrid-universal
(v4.5.0
) and Slickgrid-React
(v4.5.0
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
Published by github-actions[bot] 9 months ago
@slickgrid-universal/excel-export
🚀We are migrating from excel-builder.js to a new fork Excel-Builder-Vanilla
, the approach is a very similar to what I have done previously with multiple-select-vanilla
and it is all about modernizing the project. This migration brings a lot of goodies by using this new Excel-Builder-Vanilla
, it was rewritten in TypeScript, dropped Q
(replaced by regular Promise
), dropped Lodash
(now uses native code) and finally replaced JSZip
with fflate
which itself also has an ESM build giving us Tree Shaking and it is also giving us better perf by using Web Workers (when using CSP, you might need to adjust your CSP rules). Why the switch? The reason is mainly to be ESM ready because technologies are evolving and ESM is really the future (the next release of ViteJS is also expected to drop CJS (CommonJS) support). The switch has other benefits too, the most noticeable one being the large build size decrease (that is because we dropped Q
and Lodash
).
You might be wondering, why not switch to a more popular library like SheetJS
or ExcelJS
? Well, believe or not, all these projects are still written as CJS with no foreseeable support to ESM builds. For that reason you cannot take advantage of proper Tree Shaking which mean that whoever uses these projects, are in fact downloading their entire (large) library and all their dependencies. We certainly don't need all of these features in here since all we need is to export to Excel and this is what Excel-Builder-Vanilla
is giving us in an ESM build and it is also extremely small since it's only targeting Excel file creation. 🏗️
Below are the migrating advantages to Excel-Builder-Vanilla
d.ts
)Q
and Lodash
)JSZip
to fflate
(has ESM support with Tree Shaking and also better perf by using Web Workers)No breaking change, the changes required were all internal and are totally transparent to the developers because the API is exactly the same as before, the only difference will be your build size decrease ;)
For a very customized view of what you can do with Excel-Builder, take a look at the Slickgrid-Universal Example 2, try to group by any column and then Export to Excel to see the very customized Excel output.
Note that if you had a JSZip
path defined in your tsconfig.json
, you can now remove it. that is because we migrated to fflate
and it doesn't require any special config.
{
"compilerOptions": {
- "paths": {
- "jszip": [
- "node_modules/jszip/dist/jszip.min.js"
- ]
- }
}
}
Please remember that all packages of @slickgrid-universal
(v4.4.1
) and Slickgrid-React
(v4.4.1
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
Published by github-actions[bot] 9 months ago
@slickgrid-universal/excel-export
🚀With this release, we are migrating from excel-builder.js to a new fork Excel-Builder-Vanilla
, the new repo is a very similar approach to what I have done previously with multiple-select-vanilla
and it is all about modernizing the project. This migration brings a lot of goodies by using Excel-Builder-Vanilla, we now have an ESM build, it was rewritten in TypeScript, dropped Q
(replaced by regular Promise
), dropped Lodash
(now uses native code) and finally replaced JSZip
with fflate
which also has an ESM build giving us Tree Shaking and it is also giving us better perf by using Web Workers (when using CSP, you might need to adjust your CSP rules). Why the switch? The reason is mainly to be ESM ready because technologies are evolving and ESM is really the future (the next release of ViteJS is also expected to drop CJS (CommonJS) support). The switch has other benefits too, the most noticeable one being the large build size decrease (because we dropped Q
and Lodash
).
You might be wondering, why not switch to a more popular library like SheetJS
or ExcelJS
? Well believe or not, these projects are still written as CJS with no foreseeable support to ESM builds and for that reason you cannot take advantage of proper Tree Shaking which mean that whoever uses these projects, are in fact downloading their entire (large) library and all their dependencies. We certainly don't need all of these features in here, the only thing we are interested is to create and export an Excel file and our new Excel-Builder-Vanilla
is not only ESM ready but is also extremely small since it's only targeting Excel file creation. 🏗️
Below are the migrating advantages to Excel-Builder-Vanilla
d.ts
)Q
and Lodash
)JSZip
to fflate
(has ESM support with Tree Shaking and also better perf by using Web Workers)No breaking change, the changes required were all internal and are totally transparent to the developers because the API is exactly the same as before, the only difference will be your build size decrease ;)
For a very customized view of what you can do with Excel-Builder and Slickgrid-Universal, take a look at the Slickgrid-Universal Example 2, try to group by any column and then Export to Excel to see the very customized Excel output.
Note that if you had a JSZip
path defined in your tsconfig.json
, you can now remove it. that is because we migrated to fflate
and it doesn't require any special config.
{
"compilerOptions": {
- "paths": {
- "jszip": [
- "node_modules/jszip/dist/jszip.min.js"
- ]
- }
}
}
Published by github-actions[bot] 9 months ago
This release brings some great new features, the most interesting one was contributed by @zewa666 which is a new Row Base Editing. The Row Based Edit plugin allows you to edit either a single or multiple specific rows at a time, while disabling the rest of the grid rows. See our new Example 35
Another great but smaller feature is a new reorderable
column option to help lock a column in place (for more info see Slickgrid-Universal PR which include a small animated gif of the feature). Note that this feature is better when used with column position as first or last columns in the grid.
I did add and set reorderable: false
to the following 4 plugins, they can all be overriden when instantiating the plugin via their respective options
Please remember that all packages of @slickgrid-universal
(v4.3.0
) and Slickgrid-React
(v4.3.0
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
Published by github-actions[bot] 10 months ago
This release brings some perf improvements and also completes the CSP Safe implementation, there was 1 last DataView function that was not yet converted to be CSP Safe and now it is (don't forget to use the new useCSPSafeFilter
if you also use the DataView). There is also a new CSP Compliance documentation that you can read.
Lastly a few other small features and fixes were pushed, see below. Happy Holidays 🎁
Please remember that all packages of @slickgrid-universal
(v4.2.0
) and Slickgrid-React
(v4.2.0
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
Published by github-actions[bot] 10 months ago
Please remember that all packages of @slickgrid-universal
(v4.1.0
) and Slickgrid-React
(v4.1.0
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
Published by github-actions[bot] 11 months ago
This new release is merging SlickGrid
into the Slickgrid-Universal project and is dropping the previous external 6pac/slickgrid
dependency. The aim of this release is to be standalone, improve best practices & move towards CSP compliance while also making the project leaner. Merging SlickGrid into the Slickgrid-Universal project has a few benefits, the biggest are (easier to troubleshoot, we can drop unused code, deduplicate code like DOM utils, decrease external dependencies usage).
Another great feature in conjunction with this release is a new Documentation website powered by GitBook. This should be more pleasing to read and also easier to receive documentation changes (note that because of the changes from Wiki to GitBook, some of the links might be invalid, please contribute PRs if you find any).
Read the Migration to 4.0 for all the changes
Please remember that all packages of @slickgrid-universal
(v4.0.3
) and Slickgrid-React
(v4.0.2
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
Published by github-actions[bot] 11 months ago
THIS IS AN INVALID VERSION - Release-it made a totally invalid bump recommendation and thought it was a minor
version even though I had a BREAKING CHANGE PR.
Please ignore this version, it was supposed to be v4.0
Published by github-actions[bot] 11 months ago
Please note that multiple built-in Formatters are now deprecated and will be removed in the next major version (which is coming very soon). Below is the list of Formatters and their alternatives with code sample on what to change. Note that the CSS class may vary depending on which UI framework you use.
Formatter removed |
cssClass equivalent |
alternative |
---|---|---|
Formatters.bold |
cssClass: 'text-bold' or fw-bold
|
|
Formatters.center |
cssClass: 'text-center' |
|
Formatters.italic |
cssClass: 'text-italic' or fst-italic
|
|
Formatters.alignRight |
cssClass: 'text-right' or text-end
|
|
Formatters.lowercase |
cssClass: 'text-lowercase' |
|
Formatters.uppercase |
cssClass: 'text-uppercase' |
|
Formatters.fakeHyperlink |
cssClass: 'text-underline cursor' |
cssClass: 'fake-hyperlink' |
Formatters.checkbox |
to be removed | use the Formatters.iconBoolean
|
Formatters.deleteIcon |
to be removed | use the Formatters.icon (see below) |
Formatters.editIcon |
to be removed | use the Formatters.icon (see below) |
Formatters.infoIcon |
to be removed | use the Formatters.icon (see below) |
Formatters.yesNo |
to be removed | create a custom Formatter |
The alternative is to use cssClass
as shown below
this.columnDefinitions = [
{
id: 'firstName', name: 'First Name', field: 'firstName',
- formatter: Formatters.bold
+ cssClass: 'text-bold'
},
{
id: 'lastName', name: 'Last Name', field: 'lastName',
- formatter: Formatters.multiple, params: { formatters: [Formatters.uppercase, Formatters.bold] },
+ cssClass: 'text-uppercase text-bold'
},
{
id: 'deleteIcon', name: '', field: '',
- formatter: Formatters.deleteIcon,
// NOTE: we previously accepted "icon" and "formatterIcon" property in the past but these props will be removed
+ formatter: Formatters.icon, params: { iconCssClass: 'fa fa-trash pointer' }
},
];
Please remember that all packages of @slickgrid-universal
(v3.7.2
) and Slickgrid-React
(v3.6.4
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
please remember that Slickgrid-Universal monorepo contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.
Published by github-actions[bot] 11 months ago
Please note that multiple built-in Formatters are now deprecated and will be removed in the next major version (which is coming very soon). Below is the list of Formatters and their alternatives with code sample on what to change. Note that the CSS class may vary depending on which UI framework you use.
Formatter removed |
cssClass equivalent |
alternative |
---|---|---|
Formatters.bold |
cssClass: 'text-bold' or fw-bold
|
|
Formatters.center |
cssClass: 'text-center' |
|
Formatters.italic |
cssClass: 'text-italic' or fst-italic
|
|
Formatters.alignRight |
cssClass: 'text-right' or text-end
|
|
Formatters.lowercase |
cssClass: 'text-lowercase' |
|
Formatters.uppercase |
cssClass: 'text-uppercase' |
|
Formatters.fakeHyperlink |
cssClass: 'text-underline cursor' |
cssClass: 'fake-hyperlink' |
Formatters.checkbox |
to be removed | use the Formatters.iconBoolean
|
Formatters.deleteIcon |
to be removed | use the Formatters.icon (see below) |
Formatters.editIcon |
to be removed | use the Formatters.icon (see below) |
Formatters.infoIcon |
to be removed | use the Formatters.icon (see below) |
Formatters.yesNo |
to be removed | create a custom Formatter |
The alternative is to use cssClass
as shown below
this.columnDefinitions = [
{
id: 'firstName', name: 'First Name', field: 'firstName',
- formatter: Formatters.bold
+ cssClass: 'text-bold'
},
{
id: 'lastName', name: 'Last Name', field: 'lastName',
- formatter: Formatters.multiple, params: { formatters: [Formatters.uppercase, Formatters.bold] },
+ cssClass: 'text-uppercase text-bold'
},
{
id: 'deleteIcon', name: '', field: '',
- formatter: Formatters.deleteIcon,
// NOTE: we previously accepted "icon" and "formatterIcon" property in the past but these props will be removed
+ formatter: Formatters.icon, params: { iconCssClass: 'fa fa-trash pointer' }
},
];
Please remember that all packages of @slickgrid-universal
(v3.7.1
) and Slickgrid-React
(v3.6.3
) must be updated at the same time and they will always get bumped on the same day to avoid any upgrade issues.
please remember that Slickgrid-Universal monorepo contains the biggest portion of the code (~90%), so most of the commits are now happening on that side.