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

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

makeOCSRequest();
      })
      .catch((err) => {
        setProgress(false);
        setError(err.message);
      });
  };

  return (
    <>
      <div>
        
          
        <table rows="{nodes}">
          </table>
      </div>
      <p id="nodes-selected">
        {selectedNodesCnt} node(s) selected
      </p>

isRequired
          >
            
          
           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}
          >
            
            
          <table></table>
          <p>
            {state.tier1BackingStore.length} resources selected
          </p>
        
        {showTier2Table &amp;&amp; (
          <form>
            <title size="xl">
              Tier 2 - Backing Store ({state.tier2Policy}){' '}</title></form>

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

const onSort = (e, i, direction) => setSortBy({ index: i, direction });

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

  return (
    
      
        
      <table rows="{tableRows}" aria-label="query results table">
        </table>
      
    
  );
};
const QueryTable = connect(

render() {
    const { columns, rows } = this.state;

    return (
      
        
      <table rows="{rows}">
        </table>
    );
  }
}

render() {
    return (
      
        
          
            
              
                
              <table rows="{this.rows()}" aria-label="{'list_virtual_services'}">
                </table>
            
          
        
      
    );
  }
}

{!this.props.details && (
                  
                )}
                {this.props.details && actionsButtons()}
              
            
            
              
                
                  
                    
                  <table aria-label="{this.entity}" rows="{this.state.rows}">
                    </table>
                
              
            
          
        
      
    );
  }
}

render() {
    const { id } = this.props;
    const { columns, rows, sortBy } = this.state;

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

render() {
    const { columns, rows, sortBy } = this.state;

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