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, analazy, 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.	-
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.	-

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>
  );
}

Props
Examples
- Basic usage

Edit this page on GitHub

Report an issue on GitHub

Switch

NextTabs

Table

Props

Examples

Basic usage

Contents