@devtools-ds/table
npm i @devtools-ds/table

@devtools-ds/table

UI components, libraries, and templates for building robust devtools experiences.

by intuit

1.2.0 (see all)License:MITTypeScript:Built-In
npm i @devtools-ds/table
Readme

@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!

Downloads/wk

135

GitHub Stars

148

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

8

OPEN ISSUES

2

OPEN PRs

1
VersionTagPublished
1.2.0
latest
2mos ago
1.1.3-canary.23.465.0
canary
2mos ago
No alternatives found
No tutorials found
Add a tutorial