feat: adding resizable

Author: afshinm

docs/examples/resizable.md

@@ -0,0 +1,45 @@
+---
+title: Resizable columns
+keywords:
+ - javascript
+ - table
+ - javascript table
+ - gridjs
+ - grid js
+ - resizable columns
+ - resize columns
+---
+
+import { LiveExample } from "../../lib/liveExample.js";
+
+Simply add `resizable: true` to your config to enable resizable columns:
+
+<LiveExample children={
+`
+const grid = new Grid({
+  columns: ['Name', 'Email', 'Phone Number'],
+  data: [
+    ['John', 'john@example.com', '(353) 01 222 3333'],
+    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444']
+  ],
+  resizable: true,
+  sort: true
+});
+`
+} />
+
+You can also set width before passing the `resizable` flag:
+
+<LiveExample children={
+`
+const grid = new Grid({
+  columns: ['Name', 'Email', 'Phone Number'],
+  data: [
+    ['John', 'john@example.com', '(353) 01 222 3333'],
+    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444']
+  ],
+  width: 500,
+  resizable: true
+});
+`
+} />

docs/examples/wide-table.md

@@ -16,6 +16,8 @@ import { LiveExample } from "../../lib/liveExample.js";
 
 Grid.js supports wide tables, too:
 
+
+
 <LiveExample children={
 `
 const grid = new Grid({
@@ -46,3 +48,38 @@ const grid = new Grid({
 :::tip
 Grid.js automatically calculates the width of columns when `autoWidth` is set to `true`
 :::
+
+You can also change the way column widths are calculated. In this example, we are adding `white-space: nowrap` to the entire
+table:
+
+<LiveExample children={
+`
+const grid = new Grid({
+  columns: [
+      'Name',
+      'Email',
+      'Title',
+      'Company',
+      'Country',
+      'County',
+   ],
+  style: { 
+    table: { 
+      'white-space': 'nowrap'
+    }
+  },
+  sort: true,
+  pagination: true,
+  data: Array(50).fill().map(x => [
+    faker.name.findName(),
+    faker.internet.email(),
+    faker.name.title(),
+    faker.company.companyName(),
+    faker.address.country(),
+    faker.address.county(),
+  ])
+});
+`
+} />
+
+<br/>

package.json

@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@docusaurus/core": "^2.0.0-alpha.72",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.71",
-    "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.71",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.72",
+    "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.72",
     "@emotion/css": "^11.1.3",
     "chartist": "^0.11.4",
     "classnames": "^2.3.1",

sidebars.js

@@ -45,6 +45,7 @@ module.exports = {
         'examples/pagination',
         'examples/search',
         'examples/sorting',
+        'examples/resizable',
         'examples/loading-state',
         'examples/wide-table',
         'examples/fixed-header',