Merge e3c6b8f into 3abe098

piecioshka · Oct 14, 2020 · fa0f953 · fa0f953
2 parents 3abe098 + e3c6b8f
commit fa0f953
Show file tree

Hide file tree

Showing 9 changed files with 3,559 additions and 9,170 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
 
@@ -73,8 +74,6 @@ More examples: <https://piecioshka.github.io/simple-data-table/demo/>
 
 Change value od button which add new row.
 
-Example:
-
 ```js
 const t = new SimpleDataTable($container, {
     addButtonLabel: 'New record'
@@ -87,8 +86,6 @@ t.render();
 
 Define what "name" should have cells in new added columns.
 
-Example:
-
 ```js
 const t = new SimpleDataTable($container, {
     defaultColumnPrefix: 'random'
@@ -97,11 +94,11 @@ t.load(...);
 t.render();
 ```
 
-#### `defaultColumnNumber` _(Default: 3)_
+#### `defaultColumnNumber` _(Default: null)_
 
 Define how much columns should contain row in empty table.
 
-Example:
+By default, use the size of headers or the number of cells in the first row.
 
 ```js
 const t = new SimpleDataTable($container, {
@@ -113,7 +110,7 @@ t.render();
 
 #### `defaultHighlightedCellClass` _(Default: 'highlighted-cell')_
 
-Define class of highlighted cell.Example:
+Define class of highlighted cell.
 
 ```js
 const t = new SimpleDataTable($container, {
@@ -125,7 +122,7 @@ t.render();
 
 #### `readonly` _(Default: false)_
 
-Define class of highlighted cell.Example:
+Define class of highlighted cell.
 
 ```js
 const t = new SimpleDataTable($container, {
@@ -145,7 +142,7 @@ Render table into DOM.
 
 Get number of rows.
 
-#### `findCellsByContent(...content): Array<{ rowIndex: number, cellIndex: number }>`
+#### `findCellsByContent( ...content: Array<string> ): Array<{ rowIndex: number, cellIndex: number }>`
 
 Get list of cell positions which contains passed strings.
 
@@ -165,7 +162,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.
 
@@ -179,19 +180,21 @@ Listen on events.
 
 #### `sortByColumn( cellIndex : number, comparingFunction : Function )`
 
-Sorts data and triggers `DATA_SORTED` event. By default takes `cellIndex=0` and sorts as [`String.prototype.localeCompare`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).
+Sorts data and triggers `DATA_SORTED` event.
+
+By default takes `cellIndex=0` and sorts as [`String.prototype.localeCompare`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).
+
+**WARNING**: Function `sortByColumn()` runs `render()` under the hood.
 
 ## Events
 
 #### `SimpleDataTable.EVENTS.UPDATE`
 
 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...
 });
 ```
@@ -200,11 +203,9 @@ d.on(SimpleDataTable.EVENTS.UPDATE, (data) => {
 
 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...
 });
 ```
@@ -213,11 +214,9 @@ d.on(SimpleDataTable.EVENTS.ROW_ADDED, () => {
 
 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...
 });
 ```
@@ -226,15 +225,19 @@ d.on(SimpleDataTable.EVENTS.ROW_REMOVED, () => {
 
 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...
 });
 ```
 
+## Static
+
+#### `SimpleDataTable.clearElement( $element: HTMLElement )`
+
+Recursive remove children from passed HTMLElement.
+
 ## Tested browsers
 
 * Safari v10.1.2

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>