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'));