How to use the @patternfly/react-table.TableVariant.compact function in @patternfly/react-table

To help you get started, we’ve selected a few @patternfly/react-table 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 kiali / kiali-ui / src / pages / Graph / GraphHelpFind.tsx View on Github external
}
                    variant={TableVariant.compact}
                    cells={this.noteColumns()}
                    rows={this.noteRows()}
                  >
                    
                    
                  <table></table>
                
                
                  }
                    variant={TableVariant.compact}
                    cells={this.operatorColumns()}
                    rows={this.operatorRows()}
                  &gt;
                    
                    
                  <table></table>
                
                
                  }
                    variant={TableVariant.compact}
                    cells={this.nodeColumns()}
                    rows={this.nodeRows()}
                  &gt;
                    
                    <table></table>
github openshift / console / frontend / packages / ceph-storage-plugin / src / components / ocs-install / node-list.tsx View on Github external
makeOCSRequest();
      })
      .catch((err) =&gt; {
        setProgress(false);
        setError(err.message);
      });
  };

  return (
    &lt;&gt;
      <div>
        
          
        <table rows="{nodes}">
          </table>
      </div>
      <p id="nodes-selected">
        {selectedNodesCnt} node(s) selected
      </p>
github openshift / console / frontend / packages / noobaa-storage-plugin / src / components / bucket-class / wizard-pages / backingstore-page.tsx View on Github external
isRequired
          &gt;
            
          
           onSelect(isSelected, 0, rowData)}
            cells={columns}
            rows={filterSearch(searchInput, filterSelected(storeMain, 0))}
            variant={TableVariant.compact}
            gridBreakPoint={TableGridBreakpoint.none}
            aria-label="Select Backing Store for Tier 1"
            className="nb-bc-bs-page__table--short"
            canSelectAll={false}
          &gt;
            
            
          <table></table>
          <p>
            {state.tier1BackingStore.length} resources selected
          </p>
        
        {showTier2Table &amp;&amp; (
          <form>
            <title size="xl">
              Tier 2 - Backing Store ({state.tier2Policy}){' '}</title></form>
github chrisruffalo / gudgeon / web / app / js / gudgeon / dashboard.js View on Github external
<div>{ LocaleNumber(this.getDataMetric(data, 'total-' + currentMetrics + '-queries')) }</div>
                
                
                  <span id="label-blocked">Blocked</span>
                  <div>{ LocaleNumber(this.getDataMetric(data, 'blocked-' + currentMetrics + '-queries')) }</div>
                
                          
            
                    
        
        { TopCards }
        { OverviewChart }
        
          
            
              
                
              <table rows="{rows}" aria-label="Lists">
                </table>            
            
                    
        
      
    )
  }
}
github openshift / console / frontend / public / components / monitoring / metrics.tsx View on Github external
const onSort = (e, i, direction) =&gt; setSortBy({ index: i, direction });

  const tableRows = rows
    .slice((page - 1) * perPage, page * perPage - 1)
    .map((cells) =&gt; ({ cells }));

  return (
    
      
        
      <table rows="{tableRows}" aria-label="query results table">
        </table>
      
    
  );
};
const QueryTable = connect(
github kiali / kiali-ui / src / pages / ServiceDetails / ServiceInfo / ServiceInfoVirtualServices.tsx View on Github external
render() {
    return (
      
        
          
            
              
                
              <table rows="{this.rows()}" aria-label="{'list_virtual_services'}">
                </table>
            
          
        
      
    );
  }
}
github apache / qpid-dispatch / console / react / src / details / detailsTablePage.js View on Github external
{!this.props.details &amp;&amp; (
                  
                )}
                {this.props.details &amp;&amp; actionsButtons()}
              
            
            
              
                
                  
                    
                  <table aria-label="{this.entity}" rows="{this.state.rows}">
                    </table>
                
              
            
          
        
      
    );
  }
}
github patternfly / patternfly-react / packages / patternfly-4 / react-table / src / components / Table / demo / DemoSortableTable.js View on Github external
render() {
    const { id } = this.props;
    const { columns, rows, sortBy } = this.state;

    return (
      
        
      <table id="{id}" rows="{rows}" aria-label="Sortable Table">
        </table>
    );
  }
}
github patternfly / patternfly-react / packages / patternfly-4 / react-integration / demo-app-ts / src / components / demos / TableDemo / TableSortableForCompoundExpandableDemo.tsx View on Github external
render() {
    const { columns, rows, sortBy } = this.state;

    return (
      
        
      <table rows="{rows}" aria-label="Sortable Table">
        </table>
    );
  }
}