@devtools-ds/table

A flexible table component, modeled after the network inspector in Chrome and FireFox.

Installation

npm i @devtools-ds/table
# or with yarn
yarn add @devtools-ds/table

Then to use the component in your code just import it!

import { Table } from "@devtools-ds/table";

Accessibility Approach

There isn't a well-established pattern for this interaction, besides being a data grid. However, data grids usually select each cell not the whole row.

I stared by looking at the interactions used in Chrome and FireFox, but they had some issues. In both implementations, the view changes on move without the user selecting a new node, and tab vs. arrow behavior could be unpredictable. For these reasons, I simplified the whole interaction and separated focus from the selected state in the table. Users can navigate focus using tab, arrow keys, or page navigation keys. Selecting a row requires clicking or keyboard entry. Rows are labelled as selected using aria-selected within the grid pattern.

Usage

import { Table } from "@devtools-ds/table";

export const BasicUsage = () => {
  const [selected, setSelected] = React.useState("");
  return (
    <Table
      selected={selected}
      onSelected={(id) => {
        setSelected(id);
      }}
    >
      <Table.Head>
        <Table.Row>
          <Table.HeadCell style={{ width: "10%" }}>Status</Table.HeadCell>
          <Table.HeadCell style={{ width: "10%" }}>Method</Table.HeadCell>
          <Table.HeadCell>Domain</Table.HeadCell>
          <Table.HeadCell>Transferred</Table.HeadCell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row id="one">
          <Table.Cell>200</Table.Cell>
          <Table.Cell>GET</Table.Cell>
          <Table.Cell>localhost:6006</Table.Cell>
          <Table.Cell>4.6 KB</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
};