1. import { Table } from 'uskin';
    3. const column = [{
    4.   title: 'ID',
    5.   width: '150px',
    6.   key: 'id',
    7.   dataIndex: 'id',
    8.   sortBy: 'number',
    9.   filter: [{
    10.     name: 'id >= 2',
    11.     key: '1',
    12.     filterBy: (item) => {
    13.       if (item.id >= 2) return true;
    14.       return false;
    15.     },
    16.   }, {
    17.     name: 'id < 2',
    18.     key: '2',
    19.     filterBy: (item) => {
    20.       if (item.id < 2) return true;
    21.       return false;
    22.     },
    23.   }],
    24. }, {
    25.   title: 'Category',
    26.   width: '120px',
    27.   key: 'category',
    28.   dataIndex: 'category',
    29. }, {
    30.   title: 'Level',
    31.   key: 'level',
    32.   dataIndex: 'level',
    33.   filter: [{
    34.     name: 'level 1',
    35.     key: '1',
    36.     filterBy: item => item.level.localeCompare('First Level') === 0,
    37.   }, {
    38.     name: 'level 2',
    39.     key: '2',
    40.     filterBy: item => item.level.localeCompare('Second Level') === 0,
    41.   }, {
    42.     name: 'level 3',
    43.     key: '3',
    44.     filterBy: item => item.level.localeCompare('Third Level') === 0,
    45.   }, {
    46.     name: 'level 4',
    47.     key: '4',
    48.     filterBy: item => item.level.localeCompare('Fourth Level') === 0,
    49.   }],
    50. }, {
    51.   title: 'Price',
    52.   key: 'price',
    53.   dataIndex: 'price',
    54. }, {
    55.   title: 'Double Price',
    56.   key: 'double_price',
    57.   sortBy: (item1, item2) => {
    58.     if (item1.price * 2 > item2.price * 2) {
    59.       return 1;
    60.     } else if (item1.price * 2 < item2.price * 2) {
    61.       return -1;
    62.     }
    64.     return 0;
    65.   },
    66.   render: (col, item) => (<div style={{ color: '#f78913' }}>{item.price * 2}</div>),
    67. }];
    69. const data = [{
    70.   id: 1,
    71.   category: 'Micro-1',
    72.   level: 'First Level',
    73.   price: '0.056',
    74. }, {
    75.   id: 2,
    76.   category: 'Standard-3',
    77.   level: 'Second Level',
    78.   price: '0.444',
    79. }, {
    80.   id: 3,
    81.   category: 'Micro-2',
    82.   level: 'Third Level',
    83.   price: '0.056',
    84. }, {
    85.   id: 4,
    86.   category: 'Standard-2',
    87.   level: 'Fourth Level',
    88.   price: '0.444',
    89. }];
    91. ReactDOM.render(<div>
    92.   <Table
    93.     column={column}
    94.     data={data}
    95.     dataKey={'id'}/>
    96. </div>, mountNode);