diff --git a/docs-wip/_sidebar.md b/docs-wip/_sidebar.md index 3b1aca8..2b94f5b 100644 --- a/docs-wip/_sidebar.md +++ b/docs-wip/_sidebar.md @@ -1,5 +1,15 @@ -* [Getting Started](/) +* [Frappe DataTable](/) +* [Getting Started](/getting-started.md) * [Download](download.md) * [Configuration](configuration.md) * [Events](events.md) +API +- * [DataTable](api/datatable.md) +- * [Datamanager](api/datamanager.md) +* Getting started + + * [Getting Started](getting-started.md) + * [Writing more pages](more-pages.md) + * [Custom navbar](custom-navbar.md) + * [Cover page](cover.md) diff --git a/docs-wip/api/datamanager.md b/docs-wip/api/datamanager.md new file mode 100644 index 0000000..c7e1607 --- /dev/null +++ b/docs-wip/api/datamanager.md @@ -0,0 +1,22 @@ +## DataManager + +All the methods listed here are available on the `datatable.datamanager` property. + +Example +```javascript +const datatable = new DataTable(container, options); +datatable.datamanager.getRows(); +``` + +#### sortRows + +Sorts rows according the values in the column identified by `colIndex` and order `sortOrder`. + +```javascript +sortRows(colIndex: Number, sortOrder: 'asc | desc | none'): void + +// Usage +datatable.datamanager.sortRows(data, columns); +``` + +--- diff --git a/docs-wip/api/datatable.md b/docs-wip/api/datatable.md new file mode 100644 index 0000000..2b86152 --- /dev/null +++ b/docs-wip/api/datatable.md @@ -0,0 +1,125 @@ +## Datatable + +All the methods listed here are available on the `datatable` instance created using the `DataTable` constructor. + +Example +```javascript +const datatable = new DataTable(container, options); +datatable.refresh(data); +``` + +#### refresh + +Refreshes the datatable with new `data` and `column` + +```javascript +refresh(data: Array, columns: Array): void + +// Usage +datatable.refresh(data, columns); +``` + +--- + +#### setDimensions + +Refreshes the datatable layout. + +```javascript +setDimensions(): void + +// Usage +datatable.setDimensions(); +``` + +--- + +#### appendRows + +Append new rows to the datatable + +```javascript +appendRows(rows: Array): void + +// Usage +datatable.appendRows(rows); +``` + +--- + +#### showToastMessage + +Show a toast message at the bottom center of the datatable. You can hide the message by providing `hideAfter` value which is in seconds. + +```javascript +showToastMessage(message: String, hideAfter: Number): void + +// Usage +datatable.showToastMessage('Hey', 2); +``` + +--- + +#### clearToastMessage + +Clear any toast message in the datatable. + +```javascript +clearToastMessage(): void + +// Usage +datatable.clearToastMessage(); +``` + +--- + +#### getColumns + +Get all the columns + +```javascript +getColumns(): Array + +// Usage +datatable.getColumns(); +``` + +--- + +#### getRows + +Get all the rows + +```javascript +getRows(): Array + +// Usage +datatable.getRows(); +``` + +--- + +#### freeze + +Show an overlay on the datatable which displays the `freezeMessage` value provided in `options`. You cannot interact with the datatable when it is frozen. + +```javascript +freeze(): void + +// Usage +datatable.freeze(); +``` + +--- + +#### unfreeze + +Remove the freeze overlay. + +```javascript +unfreeze(): void + +// Usage +datatable.unfreeze(); +``` + diff --git a/docs-wip/configuration.md b/docs-wip/configuration.md index 9de5ca8..c808ad7 100644 --- a/docs-wip/configuration.md +++ b/docs-wip/configuration.md @@ -1,8 +1,8 @@ -## Configuration +# Configuration Frappe DataTable has a lot of customizable features, this section is dedicated to enabling / disabling existing functionality. -### Container +## Container The first parameter required by the `DataTable` constructor is the container element. You can pass in a CSS Selector or a DOM Object. @@ -13,7 +13,7 @@ const container = document.querySelector('#datatable'); const datatable = new DataTable(container, options); ``` -### Options +## Options The second parameter required by the `DataTable` constructor is the options object. The minimum required configuration is to pass `column` and `data` values. @@ -31,7 +31,7 @@ const datatable = new DataTable(container, options); The following options are configurable: -#### getEditor +### getEditor - Type: `Function` - Default: `null` @@ -39,7 +39,7 @@ Customize the editor behaviour. --- -#### serialNoColumn +### serialNoColumn - Type: `Boolean` - Default: `true` @@ -47,7 +47,7 @@ Whether to show serial number as the first column in datatable. --- -#### checkboxColumn +### checkboxColumn - Type: `Boolean` - Default: `false` @@ -55,7 +55,7 @@ Whether to show checkbox column in the datatable. --- -#### clusterize +### clusterize - Type: `Boolean` - Default: `true` @@ -65,28 +65,28 @@ Whether to use clusterize to render the data. --- -#### layout +### layout - Type: `String` - Default: `fixed` - Options: `fixed | fluid | ratio` This option controls how width of each `column` is calculated in the DataTable. -##### fixed +#### fixed The column width is calculated based on the content of the first row of the table. This layout can result in horizontal scroll. -##### fluid +#### fluid The column width is adjusted based on the width of container. So the columns will be resized if the window is resized. This layout won't result in horizontal scroll. You will always see all the columns. -##### ratio +#### ratio This layout works similar to the `flex` property in CSS. When column A has `width` set as `1` and column B as `2`, then column B's width will be twice as much as column A. --- -#### noDataMessage +### noDataMessage - Type: `String` - Default: `No Data` @@ -94,7 +94,7 @@ The message shown when there are no rows to show in the DataTable. --- -#### dynamicRowHeight +### dynamicRowHeight - Type: `Boolean` - Default: `false` @@ -102,7 +102,7 @@ The height of the row will be set according to the content of the cell with the --- -#### cellHeight +### cellHeight - Type: `Number` - Default: `null` @@ -112,7 +112,7 @@ Set the height of each cell explicitly. --- -#### inlineFilters +### inlineFilters - Type: `Boolean` - Default: `false` @@ -120,7 +120,7 @@ Whether to enable the inline filter feature. If the value is `true`, then you ca --- -#### treeView +### treeView - Type: `Boolean` - Default: `false` @@ -166,7 +166,7 @@ const datatable = new DataTable('#datatable', { --- -#### checkedRowStatus +### checkedRowStatus - Type: `Boolean` - Default: `true` @@ -174,7 +174,7 @@ Whether to show the number of rows checked in a toast message. --- -#### pasteFromClipboard +### pasteFromClipboard - _Experimental_ - Type: `Boolean` - Default: `false` @@ -183,7 +183,7 @@ Whether to allow the user to paste copied content into selected cell(s). --- -#### dropdownButton +### dropdownButton - Type: `String` - Default: `▼` @@ -198,7 +198,7 @@ Example ``` -#### headerDropdown +### headerDropdown - Type: `Array` When you hover over any column, you see the dropdown button which is used to perform certain actions for that column. @@ -216,7 +216,7 @@ options = { } ``` -#### events +### events - Type: `Object` The events options is described in detailed in the [next section](events.md). diff --git a/docs-wip/README.md b/docs-wip/getting-started.md similarity index 96% rename from docs-wip/README.md rename to docs-wip/getting-started.md index 185707f..d7bbc7f 100644 --- a/docs-wip/README.md +++ b/docs-wip/getting-started.md @@ -1,9 +1,9 @@ -# Frappe Datatable - -## Getting Started +# Getting Started The easiest way to get started with Frappe DataTable is using this [JSFiddle Demo](https://jsfiddle.net/f4qe6phc/7/). Or you can copy the following template into a new index.html file. +## Example + ```html diff --git a/docs-wip/index.html b/docs-wip/index.html index 60a74a5..d649542 100644 --- a/docs-wip/index.html +++ b/docs-wip/index.html @@ -7,6 +7,9 @@ + + +
@@ -15,12 +18,20 @@ repo: 'https://github.com/frappe/datatable', themeColor: '#58b81d', loadSidebar: true, - loadNavbar: true, auto2top: true, - maxSubLevel: 3 + homepage: 'getting-started.md', + executeScript: true, + maxLevel: 4, + subMaxLevel: 2, } + + + + + +