Merge dbe42b2 into 3abe098

piecioshka · Oct 13, 2020 · bc0c120 · bc0c120
2 parents 3abe098 + dbe42b2
commit bc0c120
Show file tree

Hide file tree

Showing 7 changed files with 267 additions and 118 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,6 +14,7 @@ module.exports = {
 
     // http://eslint.org/docs/rules/
     rules: {
+        'no-nested-ternary': ['off'],
         'strict': ['off'],
         'object-curly-newline': ['off'],
         'no-magic-numbers': ['error', {

diff --git a/README.md b/README.md
@@ -21,6 +21,7 @@
 * :white_check_mark: API: Support put value into single cell
 * :white_check_mark: API: Sorting by a concrete cell with a given function
 * :white_check_mark: Readonly Mode
+* :white_check_mark: Headers + Sorting by column
 
 ## Installation
 
@@ -97,10 +98,12 @@ t.load(...);
 t.render();
 ```
 
-#### `defaultColumnNumber` _(Default: 3)_
+#### `defaultColumnNumber` _(Default: null)_
 
 Define how much columns should contain row in empty table.
 
+By default, use the size of headers or the number of cells in the first row.
+
 Example:
 
 ```js
@@ -145,7 +148,7 @@ Render table into DOM.
 
 Get number of rows.
 
-#### `findCellsByContent(...content): Array<{ rowIndex: number, cellIndex: number }>`
+#### `findCellsByContent( ...content ): Array<{ rowIndex: number, cellIndex: number }>`
 
 Get list of cell positions which contains passed strings.
 
@@ -165,7 +168,11 @@ Remove CSS class of all highlighted cells.
 
 Put content into input in concrete cell.
 
-#### `load( data: Array )`
+#### `setHeaders( items: Array<string> )`
+
+Setup column headers. Sorting is enabled by default.
+
+#### `load( data: Array<object> )`
 
 Loading data into table component.
 

diff --git a/demo/index.html b/demo/index.html
@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="styles/main.css"/>
     <link rel="stylesheet" href="../src/skins/default.css"/>
     <script src="../test/fixtures/2-rows.js"></script>
+    <script src="../test/fixtures/3-rows.js"></script>
     <script src="../src/index.js"></script>
 
     <link rel="stylesheet" href="vendors/highlight/styles/github.css"/>
@@ -64,7 +65,8 @@ <h2><em>Example 3</em>: Change prefix of default column (use DevTools to watch)<
     <script>
         (function () {
             const t = new SimpleDataTable(document.querySelector('#example-3'), {
-                defaultColumnPrefix: 'col'
+                defaultColumnNumber: 2,
+                defaultColumnPrefix: 'col-',
             });
             t.render();
             const $addButton = t.$el.querySelector('button.add-row');
@@ -73,7 +75,7 @@ <h2><em>Example 3</em>: Change prefix of default column (use DevTools to watch)<
     </script>
     <pre><code>
 const t = new SimpleDataTable(document.querySelector('#example-3'), {
-    defaultColumnPrefix: 'col'
+    defaultColumnPrefix: 'col-'
 });
 t.render();
     </code></pre>
@@ -102,7 +104,7 @@ <h2><em>Example 4</em>: Change default number of columns</h2>
 </section>
 
 <section>
-    <h2><em>Example 5</em>: Readonly</h2>
+    <h2><em>Example 5</em>: Readonly Mode</h2>
     <div id="example-5"></div>
     <script>
         (function () {
@@ -121,5 +123,26 @@ <h2><em>Example 5</em>: Readonly</h2>
     </code></pre>
 </section>
 
+<section>
+    <h2><em>Example 6</em>: Headers + Sorting</h2>
+    <div id="example-6"></div>
+    <script>
+        (function () {
+            const t = new SimpleDataTable(document.querySelector('#example-6'), {
+                readonly: true
+            });
+            t.setHeaders(['Value', 'Color', 'Name']);
+            t.load(FIXTURE_3_ROWS);
+            t.render();
+        })();
+    </script>
+    <pre><code>
+const t = new SimpleDataTable(document.querySelector('#example-6'));
+t.setHeaders(['Value', 'Color', 'Name']);
+t.load(...);
+t.render();
+    </code></pre>
+</section>
+
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     },
     "scripts": {
         "build": "webpack ./src/index.js -o dist --output-library-type umd",
+        "watch": "npm run build -- -w",
         "clear": "rm -rf coverage/ .nyc_output/ coverage.lcov",
         "clear:all": "rm -rf node_modules/ && npm run clear",
         "test": "npm run test:unit",

diff --git a/src/index.js b/src/index.js
@@ -4,12 +4,28 @@ class SimpleDataTable {
         this.addButtonLabel = options.addButtonLabel || '✚';
         this.readonly = options.readonly || false;
         this.defaultColumnPrefix = options.defaultColumnPrefix || 'column';
-        this.defaultColumnNumber = options.defaultColumnNumber || 3;
+        this.defaultColumnNumber = options.defaultColumnNumber || null;
         this.defaultHighlightedCellClass = options.defaultHighlightedCellClass || 'highlighted-cell';
+        this.headers = [];
         this.data = [];
         this._events = {};
     }
 
+    _renderHeader($table) {
+        const $thead = document.createElement('thead');
+        const $header = document.createElement('tr');
+
+        this.headers.forEach((name, index) => {
+            const $cell = this._createEmptyHeaderCell();
+            $cell.textContent = name;
+            $cell.addEventListener('click', () => this.sortByColumn(index));
+            $header.appendChild($cell);
+        });
+
+        $thead.appendChild($header);
+        $table.appendChild($thead);
+    }
+
     render() {
         if (!this.$el) {
             throw new Error('this.$el is not defined');
@@ -18,6 +34,11 @@ class SimpleDataTable {
         this.$el.innerHTML = '';
 
         const $table = document.createElement('table');
+
+        if (this.headers.length > 0) {
+            this._renderHeader($table);
+        }
+
         const $tbody = document.createElement('tbody');
         $table.appendChild($tbody);
 
@@ -117,6 +138,10 @@ class SimpleDataTable {
         return document.createElement('td');
     }
 
+    _createEmptyHeaderCell() {
+        return document.createElement('th');
+    }
+
     _createCellWithRemoveRowButton() {
         const $cell = this._createEmptyCell();
         const $removeButton = document.createElement('button');
@@ -192,9 +217,17 @@ class SimpleDataTable {
         const $firstRecord = $tbody.querySelector('tr');
 
         if (!$firstRecord) {
-            return Array(this.defaultColumnNumber)
+            const size = this.defaultColumnNumber
+                ? this.defaultColumnNumber
+                : this.headers
+                    ? this.headers.length
+                    : this.data[0] && this.data[0].length;
+            if (!size) {
+                return [];
+            }
+            return Array(size)
                 .fill(this.defaultColumnPrefix)
-                .map((name, index) => `${name}-${index + 1}`);
+                .map((name, index) => `${name}${index + 1}`);
         }
 
         const $elements = Array.from($firstRecord.children);
@@ -203,6 +236,11 @@ class SimpleDataTable {
             .map(($input) => $input.name);
     }
 
+    setHeaders(items) {
+        this.headers = items;
+        return this;
+    }
+
     load(data) {
         this.data = Array.from(data);
         return this;
@@ -234,6 +272,7 @@ class SimpleDataTable {
             Object.values(firstRow)[cellIndex],
             Object.values(secondRow)[cellIndex])
         );
+        this.render();
         this.emit(SimpleDataTable.EVENTS.DATA_SORTED);
     }
 
@@ -248,4 +287,6 @@ class SimpleDataTable {
 }
 
 // Exports
-module.exports = { SimpleDataTable };
+if (typeof exports === 'object' && typeof module === 'object') {
+    module.exports = { SimpleDataTable };
+}
diff --git a/src/skins/default.css b/src/skins/default.css
@@ -1,3 +1,9 @@
+th {
+    border: none;
+    background-color: #d7d7d7;
+    padding: 0;
+}
+
 td {
     border: none;
     padding: 0;