react-sortable-column-table
v1.0.1
Published
A table with columns that can be reordered by dragging an icon in one of the cells
Downloads
18
Readme
React Sortable Column Table
A table with columns that can be reordered by dragging an icon in one of the cells
Installation
npm i --save react-sortable-column-table
Usage
Creating tables
import SortableTable, { SortingIcon } from 'react-sortable-column-table';
const table = (
<SortableTable>
<table>
<thead>
<tr>
<th>Foo <SortingIcon /></th>
<th>Bar <SortingIcon /></th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</tbody>
</table>
</SortableTable>
);
Creating tables using semantic-ui
import SortableTable, { SortingIcon } from 'react-sortable-column-table';
import { Table } from 'semantic-ui-react';
const semanticSortingIcon = (
<SortingIcon>
<Icon name="sort" rotated="clockwise" />
</SortingIcon>
);
const table = (
<SortableTable
tr={Table.Row}
th={Table.HeaderCell}
td={Table.Cell}
>
<Table>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Foo {semanticSortingIcon}</Table.HeaderCell>
<Table.HeaderCell>Bar {semanticSortingIcon}</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>foo</Table.Cell>
<Table.Cell>bar</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</SortableTable>
);