@ui-grid/save-state

    4.10.2 • Public • Published

    UI-Grid Save State

    The save state plugin for UI-Grid allows you to save the current look of the grid and restore it upon returning to the grid.

    For example, you may have an application where your user can reorder the columns, adjust column widths, apply sorts and filters, and select a specific cell. The user might adjust their grid to look as they wish, and then navigate to another page. When the user returns to the page with the grid, they might expect it to look like it did when they left. The save state plugin permits this.

    There are two core methods:

    • save, which packages the current grid state into an object which the calling application then stores somewhere (a cookie, session state, a database)
    • restore, which takes a grid state object, and returns the grid to the state that is stored in that object

    Note that the saveState functionality deliberately sets out to store the transient state - the information that isn't held in gridOptions nor columnDefs. The calling application is responsible for storing gridOptions and columnDefs (and must have had them in order to render the grid the first time).

    This plugin also provides some options that control what is saved. All options are true by default:

    • saveWidths
    • saveOrder
    • saveScroll
    • saveFocus
    • saveVisible
    • saveSort
    • saveFilter
    • savePagination
    • savePinning
    • saveGrouping
    • saveGroupingExpandedStates
    • saveTreeView
    • saveSelection

    Getting Started

    You can install @ui-grid/saveState via:

    npm i --save @ui-grid/saveState

    Once you install you need to load the required JS file:

    <script src="/node_modules/@ui-grid/core/js/ui-grid.core.min.js">
    <script src="/node_modules/@ui-grid/cellnav/js/ui-grid.cellnav.min.js">
    <script src="/node_modules/@ui-grid/selection/js/ui-grid.selection.min.js">
    <script src="/node_modules/@ui-grid/resize-columns/js/ui-grid.resize-columns.min.js">
    <script src="/node_modules/@ui-grid/move-columns/js/ui-grid.move-columns.min.js">
    <script src="/node_modules/@ui-grid/pinning/js/ui-grid.pinning.min.js">
    <script src="/node_modules/@ui-grid/tree-base/js/ui-grid.tree-base.min.js">
    <script src="/node_modules/@ui-grid/tree-view/js/ui-grid.tree-view.min.js">
    <script src="/node_modules/@ui-grid/grouping/js/ui-grid.grouping.min.js">
    <script src="/node_modules/@ui-grid/saveState/js/ui-grid.saveState.min.js">

    Alternatively, if you are using Webpack or RequireJS to load your dependencies, you can do the following at the top of the file that needs it:

    require('@ui-grid/core');
    require('@ui-grid/cellnav');
    require('@ui-grid/selection');
    require('@ui-grid/resize-columns');
    require('@ui-grid/move-columns');
    require('@ui-grid/pinning');
    require('@ui-grid/tree-base');
    require('@ui-grid/tree-view');
    require('@ui-grid/grouping');
    require('@ui-grid/saveState');

    Once you load the files, you need to include 'ui.grid.saveState' module in your angularJS app's dependencies, and add the ui-grid-save-state directive to your grid element.

    angular.module('myApp', [
        'ui.grid',
        'ui.grid.saveState'
    ]);
    <div ui-grid="$ctrl.gridOptions" ui-grid-save-state>

    Example

    You can find an example of this plugin in action on our website

    API Documentation

    Documentation for this plugin is provided in the api documentation, but we recommend that you pay special attention to the following:

    Issues

    You can find issues that are specific to this UI-Grid plugin by looking for the label grid-savestate in the ui-grid github issues page.

    License

    MIT

    Install

    npm i @ui-grid/save-state

    DownloadsWeekly Downloads

    15

    Version

    4.10.2

    License

    MIT

    Unpacked Size

    106 kB

    Total Files

    8

    Homepage

    ui-grid.info

    Last publish

    Collaborators

    • avatar