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, analazy, compare and filter that information.

Props

Name	Type	Description	Default
Required columns	`{ 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	`{ displayValue: React.ReactNode; sortValue?: string; }[]`	An array of objects representing the rows of the table, you will have as many objects as columns in the table. Each object has 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`
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`

Examples

Basic usage

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

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

  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={deleteIcon} /> },
    ],
    [
      { displayValue: "002"},
      { displayValue: "Louis"},
      { displayValue: "London"},
      { displayValue: <DxcButton icon={deleteIcon} /> },
    ],
    [
      { displayValue: "003"},
      { displayValue: "Lana"},
      { displayValue: "Amsterdam"},
      { displayValue: <DxcButton icon={deleteIcon} /> },
    ],
    [
      { displayValue: "004"},
      { displayValue: "Rick"},
      { displayValue: "London"},
      { displayValue: <DxcButton icon={deleteIcon} /> },
    ],
    [
      { displayValue: "005"},
      { displayValue: "Mark"},
      { displayValue: "Miami"},
      { displayValue: <DxcButton icon={deleteIcon} /> },
    ],
    [
      { displayValue: "006"},
      { displayValue: "Cris"},
      { displayValue: "Paris"},
      { displayValue: <DxcButton icon={deleteIcon} /> },
    ],
  ];

  return (
    <DxcInset space="2rem">
      <DxcResultsetTable
        columns={columns}
        rows={rows}
      ></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={deleteIcon} /> },
    ],
    [
      { displayValue: "002", sortValue: "002" },
      { displayValue: "Louis", sortValue: "Louis" },
      { displayValue: "London", sortValue: "London" },
      { displayValue: <DxcButton icon={deleteIcon} /> },
    ],
    [
      { displayValue: "003", sortValue: "003" },
      { displayValue: "Lana", sortValue: "Lana" },
      { displayValue: "Amsterdam", sortValue: "Amsterdam" },
      { displayValue: <DxcButton icon={deleteIcon} /> },
    ],
  ];

  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={deleteIcon} /> },
    ],
    [
      { displayValue: "002", sortValue: "002" },
      { displayValue: "Louis", sortValue: "Louis" },
      { displayValue: "London", sortValue: "London" },
      { displayValue: <DxcButton icon={deleteIcon} /> },
    ],
    [
      { displayValue: "003", sortValue: "003" },
      { displayValue: "Lana", sortValue: "Lana" },
      { displayValue: "Amsterdam", sortValue: "Amsterdam" },
      { displayValue: <DxcButton icon={deleteIcon} /> },
    ],
  ];

  return (
    <DxcInset space="2rem">
      <DxcResultsetTable columns={columns} rows={rows}></DxcResultsetTable>
    </DxcInset>
  );
}

Props
Examples
- Basic usage
- Sortable

Edit this page on GitHub

Report an issue on GitHub

Radio Group

NextSelect

Resultset Table

Props

Examples

Basic usage

Sortable

Contents