Merge 1906bd9 into 3abe098

piecioshka · Oct 14, 2020 · 8504fee · 8504fee
2 parents 3abe098 + 1906bd9
commit 8504fee
Show file tree

Hide file tree

Showing 9 changed files with 3,504 additions and 9,133 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/.gitignore b/.gitignore
@@ -4,5 +4,3 @@ npm-debug.log
 .nyc_output/
 coverage/
 coverage.lcov
-
-dist/
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.
 
@@ -190,8 +197,8 @@ Event is dispatching when you change any of input in table.
 Example:
 
 ```js
-const d = new SimpleDataTable($container);
-d.on(SimpleDataTable.EVENTS.UPDATE, (data) => {
+const t = new SimpleDataTable($container);
+t.on(SimpleDataTable.EVENTS.UPDATE, (data) => {
     // do some stuff with the updated data...
 });
 ```
@@ -203,8 +210,8 @@ Event is dispatching when you add new record.
 Example:
 
 ```js
-const d = new SimpleDataTable($container);
-d.on(SimpleDataTable.EVENTS.ROW_ADDED, () => {
+const t = new SimpleDataTable($container);
+t.on(SimpleDataTable.EVENTS.ROW_ADDED, () => {
     // do some stuff...
 });
 ```
@@ -216,8 +223,8 @@ Event is dispatching when you remove any record.
 Example:
 
 ```js
-const d = new SimpleDataTable($container);
-d.on(SimpleDataTable.EVENTS.ROW_REMOVED, () => {
+const t = new SimpleDataTable($container);
+t.on(SimpleDataTable.EVENTS.ROW_REMOVED, () => {
     // do some stuff...
 });
 ```
@@ -229,8 +236,8 @@ Event is dispatching after data is sorted with `sortByColumn` function.
 Example:
 
 ```js
-const d = new SimpleDataTable($container);
-d.on(SimpleDataTable.EVENTS.DATA_SORTED, () => {
+const t = new SimpleDataTable($container);
+t.on(SimpleDataTable.EVENTS.DATA_SORTED, () => {
     // do some stuff...
 });
 ```

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>