How to use the @ui5/webcomponents-react/lib/TableSelectionMode.TableSelectionMode.SINGLE_SELECT function in @ui5/webcomponents-react

To help you get started, we’ve selected a few @ui5/webcomponents-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github SAP / ui5-webcomponents-react / packages / main / src / components / AnalyticalTable / virtualization / VirtualTableBody.tsx View on Github external
useEffect(() => {
    selectionMode;
    if (innerDivRef.current) {
      innerDivRef.current.classList = '';
      innerDivRef.current.classList.add(classes.tbody);
      if (selectionMode === TableSelectionMode.SINGLE_SELECT || selectionMode === TableSelectionMode.MULTI_SELECT) {
        innerDivRef.current.classList.add(classes.selectable);
      }
      if (alternateRowColor) {
        innerDivRef.current.classList.add(classes.alternateRowColor);
      }
    }
  }, [
    innerDivRef.current,
github SAP / ui5-webcomponents-react / packages / main / src / components / AnalyticalTable / hooks / useTableRowStyling.ts View on Github external
rowProps.onClick = (e) => {
        if (row.isGrouped) {
          return;
        }

        row.toggleRowSelected();

        if (typeof onRowSelected === 'function') {
          onRowSelected(Event.of(null, e, { row, isSelected: !row.isSelected }));
        }

        if (selectionMode === TableSelectionMode.SINGLE_SELECT) {
          instance.selectedFlatRows.forEach(({ id }) => {
            instance.toggleRowSelected(id, false);
          });
        }
      };
      if (row.isSelected) {
github SAP / ui5-webcomponents-react / packages / main / src / components / AnalyticalTable / demo / demo.stories.tsx View on Github external
export const treeTable = () => {
  return (
    ('selectionMode', TableSelectionMode, TableSelectionMode.SINGLE_SELECT)}
      onRowSelected={action('onRowSelected')}
      onSort={action('onSort')}
      onRowExpandChange={action('onRowExpandChange')}
      subRowsKey={text('subRowsKey', 'subRows')}
      selectedRowIds={object('selectedRowIds', { 3: true })}
      isTreeTable={boolean('isTreeTable', true)}
    />
  );
};
treeTable.story = {
github SAP / ui5-webcomponents-react / packages / main / src / components / AnalyticalTable / hooks / useTableRowStyling.ts View on Github external
hooks.getRowProps.push((passedRowProps, { instance, row }) => {
    const { classes, selectionMode, onRowSelected } = instance.webComponentsReactProperties;
    let className = classes.tr;
    if (row.isGrouped) {
      className += ` ${classes.tableGroupHeader}`;
    }

    const rowProps: any = {
      ...passedRowProps,
      className,
      role: 'row'
    };
    if ([TableSelectionMode.SINGLE_SELECT, TableSelectionMode.MULTI_SELECT].includes(selectionMode)) {
      rowProps.onClick = (e) => {
        if (row.isGrouped) {
          return;
        }

        row.toggleRowSelected();

        if (typeof onRowSelected === 'function') {
          onRowSelected(Event.of(null, e, { row, isSelected: !row.isSelected }));
        }

        if (selectionMode === TableSelectionMode.SINGLE_SELECT) {
          instance.selectedFlatRows.forEach(({ id }) => {
            instance.toggleRowSelected(id, false);
          });
        }

@ui5/webcomponents-react

React Wrapper for UI5 Web Components and additional components

Apache-2.0
Latest version published 4 days ago

Package Health Score

90 / 100
Full package analysis

Similar packages