Resultset table

The resultset table is a data-rich component designed for displaying large sets of information with built-in features like sorting, pagination, and scroll behavior to support efficient exploration and comparison.

Overview

Code

Props

Name	Type	Description	Default
Required columns	`Column[]` being `Column` an object with the following properties: `{ displayValue: React.ReactNode; isSortable?: boolean; }`	An array of objects representing the columns of the table. Each object has the following properties: displayValue: Column display value. isSortable: Boolean value to indicate whether the column is sortable or not.	-
hidePaginator	`boolean`	If true, paginator will not be displayed.	`false`
itemsPerPage	`number`	Number of items per page.	`5`
itemsPerPageFunction	`(value: number) => void`	This function will be called when the user selects an item per page option. The value selected will be passed as a parameter.	-
itemsPerPageOptions	`number[]`	An array of numbers representing the items per page options.	-
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.	-
mode	`'default' \| 'reduced'`	The available table modes: default: Default table size. reduced: More compact table with less spacing for high density information.	`'default'`
Required rows	`Row[]` being `Row` a `Cell[]` and being `Cell` an object with the following properties: `{ displayValue: React.ReactNode; sortValue?: string \| number \| Date; }[]`	An array of objects representing the rows of the table, you will have as many objects as columns in the table. Each row is a set of cells that have the following properties: displayValue: Value to be displayed in the cell. sortValue: Value to be used when sorting the table by that column. If not indicated displayValue will be used for sorting.	-
showGoToPage	`boolean`	If true, a select component for navigation between pages will be displayed.	`true`
tabIndex	`number`	Value of the `tabindex` attribute applied to the sortable icon.	`0`
New virtualizedHeight	`string`	A fixed height must be set to enable virtualization. If no height is provided, the table will automatically adjust to the height of its content, and virtualization will not be applied.		-

DxcResultsetTable.ActionsCell

A compound component aimed to be used inside the resultset table's displayValue 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 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

() => {
  const columns = [
    { displayValue: "Id"},
    { displayValue: "Name"},
    { displayValue: "City"},
    { displayValue: "Actions"},
  ];

  const rows = [
    [
      { displayValue: "001"},
      { displayValue: "Peter"},
      { displayValue: "Miami"},
      { displayValue: <DxcButton icon="delete" /> },
    ],
    [
      { displayValue: "002"},
      { displayValue: "Louis"},
      { displayValue: "London"},
      { displayValue: <DxcButton icon="delete" /> },
    ],
    [
      { displayValue: "003"},
      { displayValue: "Lana"},
      { displayValue: "Amsterdam"},
      { displayValue: <DxcButton icon="delete" /> },
    ],
    [
      { displayValue: "004"},
      { displayValue: "Rick"},
      { displayValue: "London"},
      { displayValue: <DxcButton icon="delete" /> },
    ],
    [
      { displayValue: "005"},
      { displayValue: "Mark"},
      { displayValue: "Miami"},
      { displayValue: <DxcButton icon="delete" /> },
    ],
    [
      { displayValue: "006"},
      { displayValue: "Cris"},
      { displayValue: "Paris"},
      { displayValue: <DxcButton icon="delete" /> },
    ],
  ];

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcResultsetTable
        columns={columns}
        rows={rows}
      />
    </DxcInset>
  );
}

Reduced usage

() => {
  const columns = [
    { displayValue: "Id"},
    { displayValue: "Name"},
    { displayValue: "City"},
    { displayValue: "Actions"},
  ];

  const actions = [
    {
      icon: "delete",
      title: "Delete",
      onClick: () => {},
    },
    {
      title: "edit",
      onClick: (value) => {},
      options:[
        {
          value: "1",
          label: "Edit",
        },
        {
          value: "2",
          label: "Mark as selected",
        },
      ]
    },
  ];

  const rows = [
    [
      { displayValue: "001"},
      { displayValue: "Peter"},
      { displayValue: "Miami"},
      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
    ],
    [
      { displayValue: "002"},
      { displayValue: "Louis"},
      { displayValue: "London"},
      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
    ],
    [
      { displayValue: "003"},
      { displayValue: "Lana"},
      { displayValue: "Amsterdam"},
      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
    ],
    [
      { displayValue: "004"},
      { displayValue: "Rick"},
      { displayValue: "London"},
      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
    ],
    [
      { displayValue: "005"},
      { displayValue: "Mark"},
      { displayValue: "Miami"},
      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
    ],
    [
      { displayValue: "006"},
      { displayValue: "Cris"},
      { displayValue: "Paris"},
      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
    ],
  ];

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcResultsetTable
        columns={columns}
        rows={rows}
        mode="reduced"
      />
    </DxcInset>
  );
}

Sortable

() => {
  const showName = () => {
    return "Peter Smith";
  };
  const sortName = () => {
    return "Smith, Peter";
  };
  const columns = [
    { displayValue: "Id", isSortable: false },
    { displayValue: "Name", isSortable: true },
    { displayValue: "City", isSortable: false },
    { displayValue: "Actions", isSortable: false },
  ];

  const rows = [
    [
      { displayValue: "001", sortValue: "001" },
      { displayValue: showName(), sortValue: sortName() },
      { displayValue: "Miami", sortValue: "Miami" },
      { displayValue: <DxcButton icon="delete" /> },
    ],
    [
      { displayValue: "002", sortValue: "002" },
      { displayValue: "Louis", sortValue: "Louis" },
      { displayValue: "London", sortValue: "London" },
      { displayValue: <DxcButton icon="delete" /> },
    ],
    [
      { displayValue: "003", sortValue: "003" },
      { displayValue: "Lana", sortValue: "Lana" },
      { displayValue: "Amsterdam", sortValue: "Amsterdam" },
      { displayValue: <DxcButton icon="delete" /> },
    ],
  ];

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcResultsetTable columns={columns} rows={rows} />
    </DxcInset>
  );
}

No paginator

() => {
  const columns = [
    { displayValue: "Id"},
    { displayValue: "Name"},
    { displayValue: "City"},
    { displayValue: "Actions"},
  ];

  const actions = [
    {
      icon: "filled_delete",
      title: "Delete",
      onClick: () => {},
    },
    {
      title: "edit",
      onClick: (value) => {},
      options:[
        {
          value: "1",
          label: "Edit",
        },
        {
          value: "2",
          label: "Mark as selected",
        },
      ]
    },
  ];

  const rows = [
    [
      { displayValue: "001"},
      { displayValue: "Peter"},
      { displayValue: "Miami"},
      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
    ],
    [
      { displayValue: "002"},
      { displayValue: "Louis"},
      { displayValue: "London"},
      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
    ],
    [
      { displayValue: "003"},
      { displayValue: "Lana"},
      { displayValue: "Amsterdam"},
      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
    ],
    [
      { displayValue: "004"},
      { displayValue: "Rick"},
      { displayValue: "London"},
      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
    ],
    [
      { displayValue: "005"},
      { displayValue: "Mark"},
      { displayValue: "Miami"},
      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
    ],
    [
      { displayValue: "006"},
      { displayValue: "Cris"},
      { displayValue: "Paris"},
      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
    ],
  ];

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcResultsetTable
        columns={columns}
        rows={rows}
        hidePaginator
      />
    </DxcInset>
  );
}

Virtualized

() => {
  const columns = [
    { displayValue: "Id", isSortable: true },
    { displayValue: "Name", isSortable: true },
    { displayValue: "City", isSortable: true },
    { displayValue: "Actions", isSortable: false },
  ];

  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcResultsetTable columns={columns} rows={rows} virtualizedHeight="500px" itemsPerPage={10000}/>
    </DxcInset>
  );
}

Overview

Guidelines

Foundations

Migration

Utilities

Components

Resultset table

Props

DxcResultsetTable.ActionsCell

Props

Examples

Basic usage

Reduced usage

Sortable

No paginator

Virtualized

On this page