npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ui-grid/save-state

v4.12.4

Published

This ui-grid module provides the ability to save and restore the grid state

Downloads

28

Readme

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