Table

Data table is a component with a high rate of usage within the applications. It allows to show the user a big amount of information in a simple and simplified way. All the information contained in the table has a grid structure, defining columns and rows to place the data and allow the users to scan, analyze, compare and filter that information.

Props

Name	Type	Description	Default
Required children	`React.ReactNode`	The center section of the table. Can be used to render custom content in this area.	-
New mode	`'default' \| 'reduced'`	The available table modes: default: Default table size. reduced: More compact table with less spacing for high density information.	`'default'`
margin	`'xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge' \| Margin`	Size 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.	-

DxcTable.ActionsCell

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

Props

Name	Type	Description	Default
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 interactuable 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="2rem">
      <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>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <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="2rem">
      <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>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <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="2rem">
      <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>
  );
}

() => {
  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="2rem">
      <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>
  );
}

Props
DxcTable.ActionsCell
- Props
Examples

Edit this page on GitHub

Report an issue on GitHub

Switch

NextTabs

Table

Props

DxcTable.ActionsCell

Props

Examples

Basic usage

Reduced usage

Actions cell

Contents