How to add a left panel right next to a component using carbon components?

Question

I have a Sveltekit app and for my home route I want to display a table based on carbon components. I want to filter the data displayed in the table by adding a left panel right next to the table. I'm basically looking for their example

but I don't know how they solved it. I know the navbar has a navigation panel but this panel has nothing to do with the navigation and should only appear for my home route.

I tried to modify the official codebox sample to show what I have so far ( please have mercy, I've never used React before ). I hope the technology ( React / Vue / Svelte ) shouldn't matter.

import React from "react";
import { render } from "react-dom";
import {
  Header,
  HeaderName,
  HeaderNavigation,
  HeaderMenuItem,
  Theme,
  Content,
  DataTable,
  TableContainer,
  Table,
  TableHead,
  TableRow,
  TableHeader,
  TableBody,
  TableCell
} from "@carbon/react";

const App = () => (
  <Theme theme="g100">
    <Header>
      <HeaderName>Nav goes here</HeaderName>
      <HeaderNavigation>
        <HeaderMenuItem>Link 1</HeaderMenuItem>
      </HeaderNavigation>
    </Header>
    <Content>
      {/* TODO add sidebar for filters right next to the table */}

      <DataTable
        rows={[
          {
            id: 1,
            name: "First element"
          }
        ]}
        headers={[
          {
            key: "name",
            header: "Name"
          }
        ]}
      >
        {({ rows, headers, getHeaderProps, getTableProps }) => (
          <TableContainer title="DataTable">
            <Table {...getTableProps()}>
              <TableHead>
                <TableRow>
                  {headers.map((header) => (
                    <TableHeader {...getHeaderProps({ header })}>
                      {header.header}
                    </TableHeader>
                  ))}
                </TableRow>
              </TableHead>
              <TableBody>
                {rows.map((row) => (
                  <TableRow key={row.id}>
                    {row.cells.map((cell) => (
                      <TableCell key={cell.id}>{cell.value}</TableCell>
                    ))}
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        )}
      </DataTable>
    </Content>
  </Theme>
);

render(<App />, document.getElementById("root"));

I thought about using a Grid component but then both columns get the same width and the grid comes with a big horizontal margin.

If the grid is the right component for the job, how can I tell the first column ( filters ) to use the width it needs and the second column ( table ) fills the rest?

Do you have any ideas how to setup a left panel?

Answer 1

The Grid is the component intended for layout like this. It has various options to modify its behavior and should be configured to be responsive.

It has a max-width that is probably intended to aid with readability as long lines on larger screens are harder to process. This limit can be removed by setting fullWidth.

There also is some padding that can be removed via noGutter, noGutterLeft and noGutterRight. These exist for Grid, Row and Column.

The responsiveness of the grid system is documented in more detail in the design system specification. The number of "virtual" columns is dependent on the screen size. This count ranges from 4 up to 16.

E.g. in this case you might want to set sm={4} so the column jumps to full-width above the table on small screens and set md={2} to take up less space otherwise.

<Content>
    <Grid fullWidth noGutter>
        <Row>
            <Column sm={4} md={2}>
                <div class="panel">
                    Left Panel
                </div>
            </Column>
            <Column>Content</Column>
        </Row>
    </Grid>
</Content>

REPL