body {
margin: 0;
padding: 0;
}
import React, {Component, createElement} from 'react';
import {render} from 'react-dom';
import Table, {THEMES} from '@jetbrains/ring-ui/components/table/table';
import Selection from '@jetbrains/ring-ui/components/table/selection';
import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid';
import Link from '@jetbrains/ring-ui/components/link/link';
import Pager from '@jetbrains/ring-ui/components/pager/pager';
import Button from '@jetbrains/ring-ui/components/button/button';
import mock from '@jetbrains/ring-ui/components/table/table.examples.json';
const pageSize = 7;
const total = mock.length;
class Example extends Component {
state = {
data: [],
selection: new Selection(),
caption: undefined,
selectable: true,
draggable: true,
page: 1,
pageSize,
total,
sortKey: 'country',
sortOrder: true,
loading: false,
cleanUI: false
}
columns = [
{
id: 'country',
title: 'Country',
sortable: true
},
{
id: 'id',
title: 'ID',
rightAlign: true
},
{
id: 'city',
title: 'City',
sortable: true
},
{
id: 'url',
title: 'URL',
getValue: ({url}) => {url}
}
]
onSort = ({column: {id: sortKey}, order: sortOrder}) => {
this.setState({sortKey, sortOrder});
}
onPageChange = page => {
this.setState({page});
}
componentWillMount() {
this.loadPage();
}
componentDidUpdate(prevProps, prevState) {
const {page, sortKey, sortOrder} = this.state;
if (page !== prevState.page || sortKey !== prevState.sortKey || sortOrder !== prevState.sortOrder) {
this.loadPage();
}
}
isItemSelectable(item) {
return item.id !== 14;
}
loadPage = () => {
const {page, pageSize, sortKey, sortOrder} = this.state;
let data = [...mock];
data.sort((a, b) => a[sortKey].localeCompare(b[sortKey]) * (sortOrder ? 1 : -1));
data = data.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
const selection = new Selection({data, isItemSelectable: this.isItemSelectable});
this.setState({data, selection});
}
render() {
const {
data, caption, selectable, draggable, cleanUI,
loading, page, pageSize, total, selection,
sortKey, sortOrder
} = this.state;
return (
this.setState({selection})}
onReorder={({data}) => this.setState({data})}
loading={loading}
onSort={this.onSort}
sortKey={sortKey}
sortOrder={sortOrder}
caption={caption}
selectable={selectable}
isItemSelectable={this.isItemSelectable}
draggable={draggable}
autofocus
/>
Active items: {[...selection.getActive()].map(item => item.country).join(', ')}
{
selectable
?
:
}
{
draggable
?
:
}
{
caption
?
:
}
{
loading
?
:
}
{
cleanUI
?
:
}
{page === 1 && data.length > 5 &&
{
selection.isSelected(data[3])
?
:
}
{
selection.isSelected(data[5])
?
:
}
}
);
}
}
render(createElement(Example, {}), document.getElementById('demo'));
import React, {Component, createElement} from 'react';
import {render} from 'react-dom';
import MultiTable from '@jetbrains/ring-ui/components/table/multitable';
import Table from '@jetbrains/ring-ui/components/table/table';
import mock from '@jetbrains/ring-ui/components/table/table.examples2.json';
import Selection from '@jetbrains/ring-ui/components/table/selection';
class Example extends Component {
columns1 = [
{
id: 'continent',
title: 'Continent'
},
{
id: 'url',
title: 'URL'
}
]
selection1 = new Selection()
columns2 = [
{
id: 'country',
title: 'Country'
},
{
id: 'city',
title: 'City'
},
{
id: 'url',
title: 'URL'
}
]
selection2 = new Selection()
render() {
return (
);
}
}
render(createElement(Example, {}), document.getElementById('demo'));