Nebulous Puffy Marshmallows

    @devtools-ds/table
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

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

    Keywords

    none

    Install

    npm i @devtools-ds/table

    DownloadsWeekly Downloads

    66

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    116 kB

    Total Files

    20

    Last publish

    Collaborators

    • tylerkrupicka