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.
Name | Type | Description | Default |
---|---|---|---|
Required columns | Column[] being {
displayValue: React.ReactNode;
isSortable?: boolean;
} | An array of objects representing the columns of the table. Each object has the following properties:
| - |
Required rows | Row[] being {
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:
| - |
New mode | 'default' | 'reduced' | The available table modes:
| '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 |
A compound component aimed to be used inside the resultset table's displayValue to display up to three actions.
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 | - |
() => { 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 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 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 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> ); }