@advanced-rest-client/json-table
Version:
A table view from a JSON structure
114 lines (85 loc) • 3.14 kB
Markdown
[](https://www.npmjs.com/package/@advanced-rest-client/json-table)
[](https://github.com/advanced-rest-client/json-table/actions/workflows/deployment.yml)
A table view from the JSON structure.
The element renders a table and / or list view from a JSON object.
If JSON is an array it renders a table view. For objects it renders a list view.
Complex object are represented as an embedded view of a list or table inside the parent object
representation. That may create very complex structure and lead to performance issues when computing
data model and building the DOM. Therefore the element will only build the first level of the view.
If the object / array contains other objects / arrays it will show only a button to display embedded
objects. That should prohibit from freezing the UI while rendering the view.
Another optimization is pagination (disabled by default). After setting the `paginate` property
array tables will contain a pagination with `itemsPerPage` items rendered at a time. The user can
change number of items at any time.
```html
<json-table json="[...]" paginate itemsPerPage="15"></json-table>
```
The element can render an actions pane above the table / list view. Action pane is to
display content actions that is relevant in context of the content displayed
below the buttons. It should be icon buttons list or just buttons added to this view.
Buttons must have `slot="content-action"` attribute set to be included to this view.
```html
<json-table json='{"json": "test"}'>
<paper-icon-button slot="content-action" title="Copy content to clipboard" icon="arc:content-copy"></paper-icon-button>
</json-table>
```
```sh
npm install --save @advanced-rest-client/json-table
```
```html
<html>
<head>
<script type="module">
import '@advanced-rest-client/json-table/json-table.js';
</script>
</head>
<body>
<json-table paginate json="..."></json-table>
</body>
</html>
```
```js
import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/json-table/json-table.js';
class SampleElement extends PolymerElement {
render() {
return html`
<json-table .json="${this.json}" paginate></json-table>
`;
}
}
customElements.define('sample-element', SampleElement);
```
```js
import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
import '@advanced-rest-client/json-table/json-table.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<json-table json="[[json]]"></json-table>
`;
}
}
customElements.define('sample-element', SampleElement);
```
```sh
git clone https://github.com/advanced-rest-client/json-table
cd json-table
npm install
```
```sh
npm start
```
```sh
npm test
```