Save width when resized and remember after refresh

src/grid.ts

@@ -6,10 +6,12 @@ import { EventEmitter } from './util/eventEmitter';
 import { GridEvents } from './events';
 import { PluginManager } from './plugin';
 import { ConfigContext } from './config';
+import {xPath} from "./util/xpath";
 
 class Grid extends EventEmitter<GridEvents> {
  public config: Config;
  public plugin: PluginManager;
+ public uniqueIdentifier: string; // this is used in order to have different column widths (saved in localstorage) for different pages and configurations, this way you can have multiple tables, routes, ...
 
  constructor(config?: Partial<Config>) {
  super();
@@ -83,6 +85,20 @@ class Grid extends EventEmitter<GridEvents> {
  this.config.container = container;
  render(this.createElement(), container);
 
+ const newUniqueIdentifier = xPath(this.config.container, true) + window.location.host + window.location.pathname; // use xpath of container because that will be unique for every table on the same page
+
+ if (this.uniqueIdentifier) {
+ // transfer all column widths to new key (because identifier changed)
+
+ const storage = {...window.localStorage};
+ for (const item in storage) {
+ window.localStorage.setItem(newUniqueIdentifier + item.split(this.uniqueIdentifier)[1], storage[item]);
+ window.localStorage.removeItem(item);
+ }
+ }
+
+ this.uniqueIdentifier = newUniqueIdentifier;
+
  return this;
  }
 }

src/util/xpath.ts

@@ -0,0 +1,127 @@
+export const xPath = function(node, optimized) {
+ if (node.nodeType === 9) {
+ return '/';
+ }
+
+ const steps = [];
+
+ while (node) {
+ const step = xPathValue(node, optimized);
+ if (!step) {
+ break;
+ } // Error - bail out early.
+ steps.push(step);
+ if (step.optimized) {
+ break;
+ }
+ node = node.parentNode;
+ }
+
+ steps.reverse();
+ return (steps.length && steps[0].optimized ? '' : '/') + steps.join('/');
+};
+
+const xPathValue = function(node, optimized) {
+ let ownValue;
+ const ownIndex = xPathIndex(node);
+ if (ownIndex === -1) {
+ return null;
+ } // Error.
+
+ switch (node.nodeType) {
+ case 1:
+ if (optimized && node.getAttribute('id')) {
+ return new Step('//*[@id="' + node.getAttribute('id') + '"]', true);
+ }
+ ownValue = node.localName;
+ break;
+ case 2:
+ ownValue = '@' + node.nodeName;
+ break;
+ case 3:
+ case 4:
+ ownValue = 'text()';
+ break;
+ case 7:
+ ownValue = 'processing-instruction()';
+ break;
+ case 8:
+ ownValue = 'comment()';
+ break;
+ case 9:
+ ownValue = '';
+ break;
+ default:
+ ownValue = '';
+ break;
+ }
+
+ if (ownIndex > 0) {
+ ownValue += '[' + ownIndex + ']';
+ }
+
+ return new Step(ownValue, node.nodeType === 9);
+};
+
+const xPathIndex = function(node) {
+ /**
+ * Returns -1 in case of error, 0 if no siblings matching the same expression,
+ * <XPath index among the same expression-matching sibling nodes> otherwise.
+ */
+ function areNodesSimilar(left, right) {
+ if (left === right) {
+ return true;
+ }
+
+ if (left.nodeType === 1 && right.nodeType === 1) {
+ return left.localName === right.localName;
+ }
+
+ if (left.nodeType === right.nodeType) {
+ return true;
+ }
+
+ // XPath treats CDATA as text nodes.
+ const leftType = left.nodeType === 4 ? 3 : left.nodeType;
+ const rightType = right.nodeType === 4 ? 3 : right.nodeType;
+ return leftType === rightType;
+ }
+
+ const siblings = node.parentNode ? node.parentNode.children : null;
+ if (!siblings) {
+ return 0;
+ } // Root node - no siblings.
+ let hasSameNamedElements;
+ for (let i = 0; i < siblings.length; ++i) {
+ if (areNodesSimilar(node, siblings[i]) && siblings[i] !== node) {
+ hasSameNamedElements = true;
+ break;
+ }
+ }
+ if (!hasSameNamedElements) {
+ return 0;
+ }
+ let ownIndex = 1; // XPath indices start with 1.
+ for (let i = 0; i < siblings.length; ++i) {
+ if (areNodesSimilar(node, siblings[i])) {
+ if (siblings[i] === node) {
+ return ownIndex;
+ }
+ ++ownIndex;
+ }
+ }
+ return -1; // An error occurred: |node| not found in parent's children.
+};
+
+export class Step {
+ value: string;
+ optimized: boolean;
+ constructor(value: string, optimized: boolean) {
+ this.value = value;
+ this.optimized = optimized || false;
+ }
+
+ toString(): string {
+ return this.value;
+ }
+}

src/view/plugin/resize/resize.tsx

@@ -2,11 +2,14 @@ import { h, RefObject } from 'preact';
 import { classJoin, className } from '../../../util/className';
 import { TColumn } from '../../../types';
 import { throttle } from '../../../util/throttle';
+import {useConfig} from "../../../hooks/useConfig";
 
 export function Resize(props: {
  column: TColumn;
  thRef: RefObject<HTMLTableCellElement>;
 }) {
+ const config = useConfig();
+
  let moveFn: (e) => void;
 
  const getPageX = (e: MouseEvent | TouchEvent) => {
@@ -38,7 +41,9 @@ export function Resize(props: {
  const thElement = props.thRef.current;
 
  if (offsetStart + getPageX(e) >= parseInt(thElement.style.minWidth, 10)) {
- thElement.style.width = `${offsetStart + getPageX(e)}px`;
+ const width = offsetStart + getPageX(e);
+ thElement.style.width = `${width}px`;
+ localStorage.setItem(`${config.instance.uniqueIdentifier}${props.column.id}`, width.toString()); // save column width in local storage
  }
  };
 

src/view/table/th.tsx

@@ -33,6 +33,19 @@ export function TH(
  });
  }
  }
+
+ if (thRef.current && isResizable()) {
+ const width = localStorage.getItem(`${config.instance.uniqueIdentifier}${props.column.id}`); // get column width from local storage
+ if (width && !isNaN(Number(width))) {
+ thRef.current.style.width = `${width}`;
+ }
+ else {
+ thRef.current.style.width = `${props.column.width}`;
+ }
+ }
+ else if (thRef.current) {
+ thRef.current.style.width = `${props.column.width}`;
+ }
  }, [thRef]);
 
  const isSortable = (): boolean => props.column.sort != undefined;
@@ -110,7 +123,6 @@ export function TH(
  ...config.style.th,
  ...{
  minWidth: props.column.minWidth,
- width: props.column.width,
  },
  ...style,
  ...props.style,