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