ExTreeTable

v1.0.0Control

ExSDK tree table control for SAP UI5/Fiori applications. Includes loading state management.

Namespace
ux7.control.ExTreeTable
Extends
sap.ui.core.Control
XML tag
<ExTreeTable />
Quick Start
<VBox class="sapUiMediumMargin" width="100%">

  <!-- Performans Test Butonları -->
  <ux7:ExTitle text="Performans Testi" level="h3" variant="section" />
  <HBox wrap="Wrap" class="sapUiSmallMarginBottom" alignItems="Center">
    <Button text="Orijinal Veri" press=".onLoadOriginal" class="sapUiSmallMarginEnd sapUiSmallMarginBottom" type="Default" />
    <Button text="1.000 Node" press=".onLoadTest" class="sapUiSmallMarginEnd sapUiSmallMarginBottom" type="Emphasized">
      <customData>
        <core:CustomData key="count" value="1000" />
      </customData>
    </Button>
    <Button text="10.000 Node" press=".onLoadTest" class="sapUiSmallMarginEnd sapUiSmallMarginBottom" type="Emphasized">
      <customData>
        <core:CustomData key="count" value="10000" />
      </customData>
    </Button>
    <Button text="100.000 Node" press=".onLoadTest" class="sapUiSmallMarginEnd sapUiSmallMarginBottom" type="Attention">
      <customData>
        <core:CustomData key="count" value="100000" />
      </customData>
    </Button>
    <Button text="1.000.000 Node" press=".onLoadTest" class="sapUiSmallMarginEnd sapUiSmallMarginBottom" type="Reject">
      <customData>
        <core:CustomData key="count" value="1000000" />
      </customData>
    </Button>
    <Button text="Temizle" press=".onClearData" class="sapUiSmallMarginBottom" type="Ghost" />
  </HBox>

  <!-- 1. Organizasyon Ağacı -->
  <ux7:ExTitle text="Organizasyon Ağacı" level="h3" variant="section" />
  <ux7:ExTreeTable id="treeTableOrg" title="Organizasyon" eyebrow="Şirket Yapısı" selectMode="single_select" searchable="true" showExpandAllBtn="true" indentGuides="true" density="comfortable" loading="{treeModel>/isLoading}" rows="{perfModel>/data}" treeColumnKey="name" childrenField="children" rowSelect=".onRowSelect" selectionChange=".onSelectionChange">
    <ux7:columns>
      <ux7:ExTableColumn key="name" label="Ad / Unvan" width="260px" />
      <ux7:ExTableColumn key="department" label="Departman" width="180px" />
      <ux7:ExTableColumn key="headcount" label="Kişi Sayısı" width="120px" formatter="number" />
      <ux7:ExTableColumn key="budget" label="Bütçe (₺)" width="160px" formatter="currency" />
      <ux7:ExTableColumn key="status" label="Durum" width="120px" formatter="status" />
      <ux7:ExTableColumn key="status" label="Durum" width="120px" formatter="status" />
      <ux7:ExTableColumn key="status" label="Durum" width="120px" formatter="status" />
      <ux7:ExTableColumn key="status" label="Durum" width="120px" formatter="status" />
      <ux7:ExTableColumn key="status" label="Durum" width="120px" formatter="status" />
      <ux7:ExTableColumn key="status" label="Durum" width="120px" formatter="status" />
      <ux7:ExTableColumn key="status" label="Durum" width="120px" formatter="status" />
    </ux7:columns>
  </ux7:ExTreeTable>
 

</VBox>


<VBox class="sapUiMediumMargin" width="100%">

  <!-- Test Butonları -->
  <Toolbar style="Clear" class="sapUiSmallMarginBottom">
    <Title text="Performans Testi" />
    <Button text="Orijinal" press=".onLoadOriginal" type="Default" />
    <Button text="1K" press=".onLoadTest" type="Emphasized">
      <customData>
        <core:CustomData key="count" value="1000" />
      </customData>
    </Button>
    <Button text="10K" press=".onLoadTest" type="Emphasized">
      <customData>
        <core:CustomData key="count" value="10000" />
      </customData>
    </Button>
    <Button text="100K" press=".onLoadTest" type="Attention">
      <customData>
        <core:CustomData key="count" value="100000" />
      </customData>
    </Button>
    <Button text="1M" press=".onLoadTest" type="Reject">
      <customData>
        <core:CustomData key="count" value="1000000" />
      </customData>
    </Button> 
    <Button text="Temizle" press=".onClearData" type="Ghost" />
  </Toolbar>

  <!-- Timing Chip -->
  <Text id="timingText" text="" class="sapUiSmallMarginBottom" />

  <!-- ExTreeTable -->
  <ux7:ExTitle text="ExTreeTable (Custom)" level="h3" variant="section" />
  <ux7:ExTreeTable id="exTreeTable" title="Organizasyon" eyebrow="Performans Testi" selectMode="multi_select" searchable="true" showExpandAllBtn="true" indentGuides="true" density="comfortable" loading="{perfModel>/isLoading}" rows="{perfModel>/data}" treeColumnKey="name" selectionChange=".onSelectionChange" childrenField="children">
    <ux7:columns>
      <ux7:ExTableColumn key="name" label="Ad / Unvan" />
      <ux7:ExTableColumn key="department" label="Departman" />
      <ux7:ExTableColumn key="headcount" label="Kişi Sayısı" formatter="number" />
      <ux7:ExTableColumn key="budget" label="Bütçe (₺)" formatter="currency" />
      <ux7:ExTableColumn key="status" label="Durum" formatter="status" /> 
    </ux7:columns>
  </ux7:ExTreeTable> 
  
</VBox>