Resultset 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 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.	-
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.	-
New mode	`'default' \| 'reduced'`	The available table modes: default: Default table size. reduced: More compact table with less spacing for high density information.	`'default'`
New hidePaginator	`boolean`	If true, paginator will not be displayed.	`false`
showGoToPage	`boolean`	If true, a select component for navigation between pages will be displayed.	`true`
itemsPerPage	`number`	Number of items per page.	`5`
itemsPerPageOptions	`number[]`	An array of numbers representing the items per page options.	-
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.	-
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.	-
tabIndex	`number`	Value of the `tabindex` attribute applied to the sortable icon.	`0`

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 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

() => {
  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="2rem">
      <DxcResultsetTable
        columns={columns}
        rows={rows}
      ></DxcResultsetTable>
    </DxcInset>
  );
}

() => {
  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="2rem">
      <DxcResultsetTable
        columns={columns}
        rows={rows}
      ></DxcResultsetTable>
    </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="2rem">
      <DxcResultsetTable
        columns={columns}
        rows={rows}
        mode="reduced"
      ></DxcResultsetTable>
    </DxcInset>
  );
}

() => {
  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="2rem">
      <DxcResultsetTable
        columns={columns}
        rows={rows}
        mode="reduced"
      ></DxcResultsetTable>
    </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="2rem">
      <DxcResultsetTable columns={columns} rows={rows}></DxcResultsetTable>
    </DxcInset>
  );
}

() => {
  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="2rem">
      <DxcResultsetTable columns={columns} rows={rows}></DxcResultsetTable>
    </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="2rem">
      <DxcResultsetTable
        columns={columns}
        rows={rows}
        hidePaginator={true}
      ></DxcResultsetTable>
    </DxcInset>
  );
}

() => {
  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="2rem">
      <DxcResultsetTable
        columns={columns}
        rows={rows}
        hidePaginator={true}
      ></DxcResultsetTable>
    </DxcInset>
  );
}

Props
DxcResultsetTable.ActionsCell
- Props
Examples

Edit this page on GitHub

Report an issue on GitHub

Radio Group

NextSelect

Resultset Table

Props

DxcResultsetTable.ActionsCell

Props

Examples

Basic usage

Reduced usage

Sortable

No paginator

Contents