SlickGrid

While SlickGrid provides an ES6/ESM build that works with most frameworks, it is highly recommended to use Slickgrid-Universal if you are working with:

• Angular
• React
• Vue

Slickgrid-Universal provides official wrappers specifically designed for these frameworks.

SlickGrid requires SortableJS as its only hard dependency. You must provide this dependency yourself depending on your environment.

Using a Standalone <script>

Include the script in your HTML:

<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>

Using CJS or ESM

If you are using a module bundler, you must manually assign the imported Sortable to the global window (or global for Node) object so SlickGrid can access it:

import Sortable from 'sortablejs';
(window as any).Sortable = Sortable;

To run the local development environment for the SlickGrid ViteJS demo, install the dependencies using npm and then start the Vite development server.

npm install
npm run dev  # run Vite dev

For modern build pipelines, install SlickGrid via npm. It is recommended to use ESM import to enable tree shaking.

1. Install the package

npm install slickgrid

2. Usage Example

Import the styles and the necessary classes (SlickGrid, SlickDataView) in your module:

import 'slickgrid/dist/styles/css/slick-alpine-theme.css';
import { SlickGrid, SlickDataView } from 'slickgrid';

const dataView = new SlickDataView({ inlineFilters: true });
const grid = new SlickGrid("#myGrid", dataView, columns, options);

npm install slickgrid

<script type="module">
  import 'slickgrid/dist/styles/css/slick-alpine-theme.css';
  import { SlickGrid, SlickDataView } from 'slickgrid';
  const dataView = new SlickDataView({ inlineFilters: true });
  const grid = new SlickGrid("#myGrid", dataView, columns, options);
</script>

SlickGrid supports both fixed and variable row heights.

• Fixed Row Height: Set the rowHeight option (defaults to a value determined by the grid, but you can specify it in pixels).
• Variable Row Height: To enable rows with different heights, set enableVariableRowHeight: true.
• Row Height Provider: When enableVariableRowHeight is enabled, you can provide a rowHeightProvider function. This function is called for each row and should return the height in pixels or undefined to fall back to the default rowHeight.

Note: The rowHeightProvider must be fast and perform no DOM access, as it is called during height calculations and caching.

Since version v5.5.0, SlickGrid is largely Content Security Policy (CSP) compliant. However, if you use custom formatters that return HTML strings, you will not be fully compliant unless you return TrustedHTML.

To achieve compliance:

1. Use the sanitizer grid option callback.
2. Combine it with DOMPurify to return TrustedHTML.

The CrossGridRowMoveManagerOption interface extends RowMoveManagerOption to enable moving rows between two different SlickGrid instances.

In addition to all standard RowMoveManagerOption properties, it requires:

• toGrid: The target SlickGrid instance where the rows will be moved to.

Control how data is sorted in the grid:

• Multi-Column Sort: Set multiColumnSort: true to allow sorting by multiple columns (typically using Shift+Click).
• Tristate Multi-Column Sort: Set tristateMultiColumnSort: true to enable multiple column sorting without needing to hold modifier keys.
• Sort Indicators: sortColNumberInSeparateSpan (defaults to true) renders the sort precedence number in a separate span with the CSS class slick-sort-indicator-numbered.

You can freeze (pin) columns or rows to keep them visible while scrolling.

• Freeze Columns: Set frozenColumn to the number of columns to freeze from the left.
• Freeze Rows: Set frozenRow to the number of rows to freeze from the top.
• Freeze Bottom: Set frozenBottom: true to freeze the bottom portion of the grid instead of the top.
• Validation: If you freeze columns that are wider than the visible viewport, the grid may trigger invalidColumnFreezeWidthCallback or invalidColumnFreezePickerCallback depending on your configuration.

Customize how data is displayed and ensure security:

• HTML Rendering: Set enableHtmlRendering: true to allow passing HTML strings to cells/rows (uses innerHTML). For strict CSP compliance, set this to false and have your formatters return HTMLElement objects instead.
• Sanitization: Provide a sanitizer: (dirtyHtml: string) => string function to clean HTML strings before rendering to prevent XSS.
• Custom Tooltips: Use customTooltip to define tooltip behavior. The grid checks the column definition first, then falls back to the GridOption.