docs updated

Author: sa-si-dev

README.md

@@ -15,8 +15,10 @@
 * Sorting
 * Resizable column
 * Hide columns
+* Change columns order
 * Sticky table header
 * Sticky columns
+* Checkbox column for rows seletion
 * Theming
 * Internationalization
 

docs/assets/sample-grid/api-utils.js

@@ -153,6 +153,12 @@ class ApiUtils {
     let grandTotal = rows.length;
     rows = rows.splice(startIndex, count);
 
+    rows = rows.map((d) => {
+      delete d.isRowSelected;
+
+      return d;
+    });
+
     return {
       rows,
       grandTotal,

docs/assets/sample-grid/grid.js

@@ -3,8 +3,18 @@ class GridComponent extends GridCoreComponent {
     let defaultOptions = {
       exportable: true,
       showSerialNumberCol: true,
+      showSelectableCol: true,
+      selectedRowsActions: [
+        { label: 'Delete', value: 'delete' },
+        { label: 'Change Status', value: 'change_status' },
+      ],
+      // selectedRowsActions: ['Delete', 'Change Status'],
     };
 
+    if (options.rows) {
+      options.rowsFromServer = false;
+    }
+
     super(Object.assign(defaultOptions, options));
   }
 
@@ -42,9 +52,8 @@ class SampleGrid extends GridComponent {
       uniqueKey: 'sampleGrid',
       apiUrl: 'api/sample-grid',
       columns: sampleGrid.columns,
-      // rowsFromServer: false,
-      // rows: getRows(210),
-      heightOffset: '70px',
+      // rows: ApiUtils.getRows(210),
+      heightOffset: '110px',
       sortable: true,
       // perPageOptions: [25, 50, 100, 200],
       showFilters: true,
@@ -67,4 +76,26 @@ class SampleGrid extends GridComponent {
   rendererHiddenCol1Filter(colData, $container) {
     $container.innerHTML = 'Custom filter section for hidden column';
   }
+
+  getSerialNumberColDetails(params = {}) {
+    let details = super.getSerialNumberColDetails(params);
+    details.width = '30px';
+
+    return details;
+  }
+
+  isRowSelectable(rowData) {
+    // return true;
+    let rowIndex = rowData.rowIndex;
+    let result = rowIndex === 0 || rowIndex % 6 !== 0;
+
+    if (!result) {
+      result = {
+        result,
+        message: 'No permission',
+      };
+    }
+
+    return result;
+  }
 }

docs/assets/script.js

@@ -63,4 +63,18 @@ function initPageGetStarted() {
 
 function initPageDemo() {
   let sampleGrid = new SampleGrid();
+
+  document.addEventListener('change', onDocumentChange);
+}
+
+function onDocumentChange(e) {
+  let $ele = e.target;
+
+  if ($ele.closest('.demo-grid-theme-input')) {
+    onDemoGridThemeChange(e);
+  }
+}
+
+function onDemoGridThemeChange(e) {
+  GridCoreComponent.setTheme(e.target.value);
 }

docs/assets/styles.css

@@ -46,6 +46,7 @@ section.cover {
 
 .markdown-section {
   max-width: 80%;
+  padding-top: 15px;
 }
 
 .docs-table-container td,
@@ -145,7 +146,32 @@ body[data-page='demo.md'] .github-corner {
   z-index: 0;
 }
 
+body[data-page='demo.md'] .docsify-pagination-container {
+  display: none;
+}
+
 /* grid - start */
+.demo-grid-top *,
+.demo-grid-top *::before,
+.demo-grid-top *::after {
+  box-sizing: border-box;
+}
+
+.demo-grid-top {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  margin-bottom: 15px;
+}
+
+.demo-grid-theme-container {
+  display: inline-flex;
+}
+
+.demo-grid-theme-container .grid-comp-custom-input-container {
+  margin-left: 10px;
+}
+
 .grid-comp-filters-box-wrapper {
   z-index: 21;
 }

docs/demo.md

@@ -1,3 +1,19 @@
+<div class="demo-grid-top">
+  <div class="demo-grid-theme-container">
+    <b>Choose theme : </b>
+    <label class="grid-comp-custom-input-container grid-comp-radio-container">
+      <input type="radio" class="grid-comp-radio demo-grid-theme-input" value="light" name="demo-grid-theme-input" checked>
+      <span class="grid-comp-custom-input-button"></span>
+      <span class="grid-comp-custom-input-text">Light</span>
+    </label>
+    <label class="grid-comp-custom-input-container grid-comp-radio-container">
+      <input type="radio" class="grid-comp-radio demo-grid-theme-input" value="dark" name="demo-grid-theme-input">
+      <span class="grid-comp-custom-input-button"></span>
+      <span class="grid-comp-custom-input-text">Dark</span>
+    </label>
+  </div>
+</div>
+
 <div id="sample-grid"></div>
 
 <script>

docs/get-started.md

@@ -16,8 +16,10 @@ Every project has its own way of data handling and business logic. Considering t
 * Sorting
 * Resizable column
 * Hide columns
+* Change columns order
 * Sticky table header
 * Sticky columns
+* Checkbox column for rows seletion
 * Theming
 * Internationalization
 

docs/properties.md

@@ -19,6 +19,8 @@
 | showFilters | Boolean | false | Show filters button to open filters |
 | showSettings | Boolean | false | Show settings button to customize columns |
 | showSerialNumberCol | Boolean | false | Show serial number column |
+| showSelectableCol | Boolean | false | Show checkbox column to select rows ([more details](https://github.com/{{repo}}/discussions/1)) |
+| selectedRowsActions | Array\<String\> \| Array\<Object\> | | List of action buttons to show when rows selected.<br/>`['Delete', 'Change Status']`<br/>-- OR --<br/>`[`<br/>&nbsp;&nbsp;`{ label: 'Delete', value: 'delete' },`<br/>&nbsp;&nbsp;`{ label: 'Change Status', value: 'change_status' },`<br/> `]` |
 | theme | String | light | Default available themes are light and dark. But you could define custom themes and use here. ([more details](theming.md)) |
 | language | String | default | Language name to get i18n text ([more details](internationalization.md)) |
 | tooltipFontSize | String | 14px | Font size for tooltip |
@@ -40,12 +42,13 @@
 
 | Name | Type | Default value | Description |
 | --- | --- | --- | --- |
-| id | String | | Unique column ID |
+| id | String | | Unique column ID (string without space or special characters) |
 | name | String | | Column header text |
 | key | String | | Property name to get column value from row details |
 | width | String | | Width of the column (in px) |
 | align | String | left | CSS text align value (left, right, center) |
 | renderer | Function | | Callback method name to render column value |
+| headRenderer | Function | | Callback method name to render column header |
 | sticky | Boolean | false | Make the column fixed on scroll horizontally |
 | resizable | Boolean | | Allow to resize width of the column |
 | sortable | Boolean | | Make the column sortable |

docs/theming.md

@@ -31,12 +31,8 @@ class GridComponent extends GridCoreComponent {
 }
 ```
 
-Theme could be changed runtime by calling `setTheme` method
+Theme could be changed in runtime by calling `setTheme` method
 
 ```js
-/** to change for a specific grid */
-sampleGrid.setTheme('blue');
-
-/** to change for all active grid instances */
 GridComponent.setTheme('blue');
 ```