Merge 2c04c3c into 3abe098

.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', {

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.
 

demo/index.html

@@ -10,7 +10,8 @@
     <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="../src/index.js"></script>
+    <script src="../test/fixtures/3-rows.js"></script>
+    <script src="../dist/main.js"></script>
 
     <link rel="stylesheet" href="vendors/highlight/styles/github.css"/>
     <script src="vendors/highlight/highlight.pack.js"></script>
@@ -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>