TableHeader

Examples

A table header that can be used as a sort control.

Alanplays accordion
Chrisdrops the mic
Tracytravels the world

Properties

labels [{node}, ...]
Header cell contents.
onSort {function ({index}, {ascending})}
Function that will be called when the user clicks on a header cell. It is passed the index of the cell and which direction to sort in.
sortAscending true|false
Indicates which direction the sort is currenly going.
sortIndex {number}
Indicates which cell is currently being sorted on.

Example

Alanplays accordion
Chrisdrops the mic
Tracytravels the world
<Table>
  <TableHeader labels={['Name', 'Note']}
    sortIndex={0}
    sortAscending={true}
    onSort={...} />
  <tbody>
    <TableRow>
      <td>
        Alan
      </td>
      <td>
        plays accordion
      </td>
    </TableRow>
    <TableRow>
      <td>
        Chris
      </td>
      <td>
        drops the mic
      </td>
    </TableRow>
    <TableRow>
      <td>
        Tracy
      </td>
      <td>
        travels the world
      </td>
    </TableRow>
  </tbody>
</Table>