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
}
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, 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
?
:
}
{page === 1 && data.length > 5 &&
{
selection.isSelected(data[3])
?
:
}
{" "}
{selection.isSelected(data[5])
?
:
}
}
);
}
}
render(createElement(Example, {}), document.getElementById('demo'));
body {
margin: 0;
padding: 0;
}
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';
const data1 = mock.continents;
const data2 = mock.countries;
class Example extends Component {
state = {
selection1: new Selection({data: data1}),
selection2: new Selection({data: data2})
};
columns1 = [
{
id: 'continent',
title: 'Continent'
},
{
id: 'url',
title: 'URL'
}
]
columns2 = [
{
id: 'country',
title: 'Country'
},
{
id: 'city',
title: 'City'
},
{
id: 'url',
title: 'URL'
}
]
render() {
return (
this.setState({selection1: selection})}
/>
this.setState({selection2: selection})}
/>
);
}
}
render(createElement(Example, {}), document.getElementById('demo'));