Skip to content

Commit

Permalink
Merge d3e0c76 into 909a14f
Browse files Browse the repository at this point in the history
  • Loading branch information
@piecioshka
piecioshka committed Oct 13, 2020
2 parents 909a14f + d3e0c76 commit 8a7eded
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 50 deletions.
43 changes: 28 additions & 15 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
* :white_check_mark: API: Highlight cells
* :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

## Installation

Expand All @@ -34,8 +35,8 @@ npm install simple-data-table

```javascript
const $container = document.querySelector('#place-to-render');
const d = new SimpleDataTable($container, options);
d.load([
const t = new SimpleDataTable($container, options);
t.load([
{
column1: 'Cell 1',
column2: 'Cell 2',
Expand All @@ -57,7 +58,7 @@ d.load([
column3: 'Cell 12'
}
]);
d.render();
t.render();
```

## Examples
Expand All @@ -75,11 +76,11 @@ Change value od button which add new row.
Example:

```js
const d = new SimpleDataTable($container, {
const t = new SimpleDataTable($container, {
addButtonLabel: 'New record'
});
d.load(...);
d.render();
t.load(...);
t.render();
```

#### `defaultColumnPrefix` _(Default: 'column')_
Expand All @@ -89,11 +90,11 @@ Define what "name" should have cells in new added columns.
Example:

```js
const d = new SimpleDataTable($container, {
const t = new SimpleDataTable($container, {
defaultColumnPrefix: 'random'
});
d.load(...);
d.render();
t.load(...);
t.render();
```

#### `defaultColumnNumber` _(Default: 3)_
Expand All @@ -103,23 +104,35 @@ Define how much columns should contain row in empty table.
Example:

```js
const d = new SimpleDataTable($container, {
const t = new SimpleDataTable($container, {
defaultColumnNumber: '7'
});
d.load(...);
d.render();
t.load(...);
t.render();
```

#### `defaultHighlightedCellClass` _(Default: 'highlighted-cell')_

Define class of highlighted cell.Example:

```js
const d = new SimpleDataTable($container, {
const t = new SimpleDataTable($container, {
defaultHighlightedCellClass: 'my-highlight'
});
d.load(...);
d.render();
t.load(...);
t.render();
```

#### `readonly` _(Default: false)_

Define class of highlighted cell.Example:

```js
const t = new SimpleDataTable($container, {
readonly: true
});
t.load(...);
t.render();
```

## API
Expand Down
68 changes: 44 additions & 24 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@ <h2><em>Example 1</em>: Minimal</h2>
<div id="example-1"></div>
<script>
(function () {
const d = new SimpleDataTable(document.querySelector('#example-1'));
d.load(FIXTURE_2_ROWS);
d.render();
const t = new SimpleDataTable(document.querySelector('#example-1'));
t.load(FIXTURE_2_ROWS);
t.render();
})();
</script>
<pre><code>
const d = new SimpleDataTable(document.querySelector('#example-1'));
d.load(...);
d.render();
const t = new SimpleDataTable(document.querySelector('#example-1'));
t.load(...);
t.render();
</code></pre>
</section>

Expand All @@ -42,19 +42,19 @@ <h2><em>Example 2</em>: Change label of add button</h2>
<div id="example-2"></div>
<script>
(function () {
const d = new SimpleDataTable(document.querySelector('#example-2'), {
const t = new SimpleDataTable(document.querySelector('#example-2'), {
addButtonLabel: 'Add'
});
d.load(FIXTURE_2_ROWS);
d.render();
t.load(FIXTURE_2_ROWS);
t.render();
})();
</script>
<pre><code>
const d = new SimpleDataTable(document.querySelector('#example-2'), {
const t = new SimpleDataTable(document.querySelector('#example-2'), {
addButtonLabel: 'Add'
});
d.load(...);
d.render();
t.load(...);
t.render();
</code></pre>
</section>

Expand All @@ -63,19 +63,19 @@ <h2><em>Example 3</em>: Change prefix of default column (use DevTools to watch)<
<div id="example-3"></div>
<script>
(function () {
const d = new SimpleDataTable(document.querySelector('#example-3'), {
addButtonLabel: 'Add'
const t = new SimpleDataTable(document.querySelector('#example-3'), {
defaultColumnPrefix: 'col'
});
d.render();
const $addButton = d.$el.querySelector('button.add-row');
t.render();
const $addButton = t.$el.querySelector('button.add-row');
$addButton.dispatchEvent(new Event('click'));
})();
</script>
<pre><code>
const d = new SimpleDataTable(document.querySelector('#example-3'), {
addButtonLabel: 'Add'
const t = new SimpleDataTable(document.querySelector('#example-3'), {
defaultColumnPrefix: 'col'
});
d.render();
t.render();
</code></pre>
</section>

Expand All @@ -84,20 +84,40 @@ <h2><em>Example 4</em>: Change default number of columns</h2>
<div id="example-4"></div>
<script>
(function () {
const d = new SimpleDataTable(document.querySelector('#example-4'), {
const t = new SimpleDataTable(document.querySelector('#example-4'), {
defaultColumnNumber: 1
});
d.render();
const $addButton = d.$el.querySelector('button.add-row');
t.render();
const $addButton = t.$el.querySelector('button.add-row');
$addButton.dispatchEvent(new Event('click'));
$addButton.dispatchEvent(new Event('click'));
})();
</script>
<pre><code>
const d = new SimpleDataTable(document.querySelector('#example-4'), {
const t = new SimpleDataTable(document.querySelector('#example-4'), {
defaultColumnNumber: 1
});
d.render();
t.render();
</code></pre>
</section>

<section>
<h2><em>Example 5</em>: Readonly</h2>
<div id="example-5"></div>
<script>
(function () {
const t = new SimpleDataTable(document.querySelector('#example-5'), {
readonly: true
});
t.load(FIXTURE_2_ROWS);
t.render();
})();
</script>
<pre><code>
const t = new SimpleDataTable(document.querySelector('#example-5'), {
readonly: true
});
t.render();
</code></pre>
</section>

Expand Down
31 changes: 20 additions & 11 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ class SimpleDataTable {
constructor($el, options = {}) {
this.$el = $el;
this.addButtonLabel = options.addButtonLabel || '✚';
this.readonly = options.readonly || false;
this.defaultColumnPrefix = options.defaultColumnPrefix || 'column';
this.defaultColumnNumber = options.defaultColumnNumber || 3;
this.defaultHighlightedCellClass = options.defaultHighlightedCellClass || 'highlighted-cell';
Expand All @@ -28,16 +29,21 @@ class SimpleDataTable {
$row.appendChild($cell);
});

this._addCellWithRemoveButton($row);
const $cell = (this.readonly)
? this._createEmptyCell()
: this._createCellWithRemoveRowButton();
$row.appendChild($cell);

$tbody.appendChild($row);
});

this.$el.appendChild($table);

const $addButton = this._createAddButton();
if (!this.readonly) {
const $addButton = this._createAddButton();
this.$el.appendChild($addButton);
}

this.$el.appendChild($addButton);
return this;
}

Expand Down Expand Up @@ -107,8 +113,12 @@ class SimpleDataTable {
$input.value = content;
}

_createEmptyCell() {
return document.createElement('td');
}

_createCellWithRemoveRowButton() {
const $cell = document.createElement('td');
const $cell = this._createEmptyCell();
const $removeButton = document.createElement('button');
$removeButton.classList.add('remove-row');
$removeButton.textContent = '✖︎';
Expand Down Expand Up @@ -142,10 +152,14 @@ class SimpleDataTable {
$input.value = value;
$input.name = name;

if (this.readonly) {
$input.disabled = true;
}

$input.addEventListener('change', () => {
this.data[rowIndex][name] = $input.value;
this.emit(SimpleDataTable.EVENTS.UPDATE, this.data);
}, this);
});

$cell.appendChild($input);
return $cell;
Expand All @@ -167,7 +181,7 @@ class SimpleDataTable {

this.data.push(record);

this._addCellWithRemoveButton($row);
$row.appendChild(this._createCellWithRemoveRowButton());
$tbody.appendChild($row);

this.emit(SimpleDataTable.EVENTS.ROW_ADDED);
Expand All @@ -189,11 +203,6 @@ class SimpleDataTable {
.map(($input) => $input.name);
}

_addCellWithRemoveButton($row) {
const $cellWithButton = this._createCellWithRemoveRowButton();
$row.appendChild($cellWithButton);
}

load(data) {
this.data = Array.from(data);
return this;
Expand Down
24 changes: 24 additions & 0 deletions test/test.index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,30 @@ test('default number of columns should be configurable', (assert) => {
assert.is($cellsWithInput.length, 5);
});

test("in readonly mode there is no buttons", (assert) => {
const t = new SimpleDataTable($target, {
readonly: true,
});
t.render();

const $addButton = $target.querySelector("button.add-row");
const $removeButton = $target.querySelector("button.remove-row");

assert.is($addButton, null);
assert.is($removeButton, null);
});

test("in readonly mode inputs are disabled", (assert) => {
const t = new SimpleDataTable($target, {
readonly: true,
});
t.load([{ foo: 'bar' }]);
t.render();

const $firstInput = $target.querySelector("input");
assert.is($firstInput.disabled, true);
});

test('API: find cells', (assert) => {
const d = new SimpleDataTable($target, {
defaultColumnNumber: 5
Expand Down

0 comments on commit 8a7eded

Please sign in to comment.