DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Table

Tables allow users to show a big amount of information in a easy and simplified way.

Overview
Code

Props

NameTypeDescriptionDefault
Required
children
React.ReactNodeThe center section of the table. Can be used to render custom content in this area.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
mode'default' | 'reduced'The available table modes:
  • default: Default table size.
  • reduced: More compact table with less spacing for high density information.
'default'

DxcTable.ActionsCell

A compound component aimed to be used inside the table to display up to three actions.

Props

NameTypeDescriptionDefault
Required
actions
{ icon: string | SVG; title: string; onClick: () => void; disabled?: boolean; tabIndex?: number; }[] | { title: string; onClick: (value?: string) => void; disabled?: boolean; tabIndex?: number; options: Option[]; }[]

It represents a list of interactive elements that will work as buttons or as a dropdown. Those with an icon from Material Symbols or a SVG are treated as buttons. If any element lacks an icon and includes options, it is interpreted as a dropdown. Only the first action with options will be displayed and only up to 3 actions. In the case of the dropdown the click function will pass the value assigned to the option, click here for more details.

-

Examples

Basic usage

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcTable>
        <thead>
          <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>cell 1</td>
            <td>cell 2</td>
            <td>cell 3</td>
          </tr>
          <tr>
            <td>cell 4</td>
            <td>cell 5</td>
            <td>cell 6</td>
          </tr>
          <tr>
            <td>cell 7</td>
            <td>cell 8</td>
            <td>Cell 9</td>
          </tr>
        </tbody>
      </DxcTable>
    </DxcInset>
  );
}

Reduced usage

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcTable mode="reduced">
        <thead>
          <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>cell 1</td>
            <td>cell 2</td>
            <td>cell 3</td>
          </tr>
          <tr>
            <td>cell 4</td>
            <td>cell 5</td>
            <td>cell 6</td>
          </tr>
          <tr>
            <td>cell 7</td>
            <td>cell 8</td>
            <td>Cell 9</td>
          </tr>
        </tbody>
      </DxcTable>
    </DxcInset>
  );
}

Actions cell

() => {
  const actions = [
    {
      icon: "delete",
      title: "Delete",
      onClick: () => {},
    },
    {
      title: "edit",
      onClick: (value) => {},
      options:[
        {
          value: "1",
          label: "Edit",
        },
        {
          value: "2",
          label: "Mark as selected",
        },
      ]
    },
  ];
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcTable mode="reduced">
        <thead>
          <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>cell 1</td>
            <td>cell 2</td>
            <td>
              <DxcTable.ActionsCell actions={actions} />
            </td>
          </tr>
          <tr>
            <td>cell 4</td>
            <td>cell 5</td>
            <td>
              <DxcTable.ActionsCell actions={actions} />
            </td>
          </tr>
          <tr>
            <td>cell 7</td>
            <td>cell 8</td>
            <td>
              <DxcTable.ActionsCell actions={actions} />
            </td>
          </tr>
        </tbody>
      </DxcTable>
    </DxcInset>
  );
}
On this page