@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>
);
};
Resources
Contributors ✨
Thanks goes to these wonderful people (emoji key):
 Tyler Krupicka 📖 🎨 💻 💡 ⚠️ |
 Andrew Lisowski 💻 |
 Adrian de la Rosa 📖 💡 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!