DataTable

DataTable component enables fetching data using predefined function and showing tabular data in a simple manner.

Features

• data pagination
• selectable rows
• expandable rows
• data sorting by columns

Access

Stage.Basic.DataTable

Usage

DataTable with pagination

this.props = {
     fetchData: ...
     data: {
         items: [
             {
                 id: ...,
                 blueprint_id: ...,
                 created_at: ...,
                 isSelected: ...
             }
             ...
         ],
         total: ...
     },
     onSelectDeployment: ...
}

<DataTable fetchData={this.props.fetchData}
           totalSize={this.props.data.total}
           pageSize={this.props.widget.configuration.pageSize}
           selectable={true}
           className="deploymentTable">

     <DataTable.Column label="Name" name="id" width="25%"/>
     <DataTable.Column label="Blueprint" name="blueprint_id" width="50%"/>
     <DataTable.Column label="Created" name="created_at" width="25%"/>

     {
         this.props.data.items.map((item)=>{
             return (
                 <DataTable.Row key={item.id} selected={item.isSelected} onClick={()=>this.props.onSelectDeployment(item)}>
                     <DataTable.Data><a className='deploymentName' href="javascript:void(0)">{item.id}</a></DataTable.Data>
                     <DataTable.Data>{item.blueprint_id}</DataTable.Data>
                     <DataTable.Data>{item.created_at}</DataTable.Data>
                 </DataTable.Row>
             );
         })
     }

</DataTable>

DataTable with action bar

<DataTable fetchData={this.props.fetchGridData}
     totalSize={this.props.data.total}
     pageSize={this.props.widget.configuration.pageSize}
     sortColumn={this.props.widget.configuration.sortColumn}
     sortAscending={this.props.widget.configuration.sortAscending}
     selectable={true}>

     <DataTable.Column label="Name" name="id" width="30%"/>
     <DataTable.Column label="Created" name="created_at" width="15%"/>
     <DataTable.Column label="Updated" name="updated_at" width="15%"/>
     <DataTable.Column label="Creator" name='created_by' width="15%"/>
     <DataTable.Column label="# Deployments" width="15%"/>
     <DataTable.Column width="10%"/>

     {
         this.props.data.items.map((item)=>{
             return (
                 <DataTable.Row key={item.id} selected={item.isSelected} onClick={()=>this.props.onSelectBlueprint(item)}>
                     <DataTable.Data>{item.created_at}</DataTable.Data>
                     <DataTable.Data>{item.updated_at}</DataTable.Data>
                     <DataTable.Data>{item.created_by}</DataTable.Data>
                     <DataTable.Data><div className="ui green horizontal label">{item.depCount}</div></DataTable.Data>
                     <DataTable.Data className="center aligned rowActions">
                         <i className="rocket icon link bordered" title="Create deployment" onClick={(event)=>{event.stopPropagation();this.props.onCreateDeployment(item)}}></i>
                         <i className="trash icon link bordered" title="Delete blueprint" onClick={(event)=>{event.stopPropagation();this.props.onDeleteBlueprint(item)}}></i>
                     </DataTable.Data>
                 </DataTable.Row>
             );
         })
     }

     <DataTable.Action>
         <UploadModal widget={this.props.widget} data={this.props.data} toolbox={this.props.toolbox}/>
     </DataTable.Action>

 </DataTable>

DataTable with expandable row and without pagination

<DataTable selectable={true}>

     <DataTable.Column label="Name" name="id" width="40%"/>
     <DataTable.Column label="Date" name="date" width="30%"/>
     <DataTable.Column width="30%"/>

     <DataTable.Row key="drupal" selected={false} onClick={()=>this.onRowClick(item)}>
         <DataTable.Data><a href="javascript:void(0)">Drupal application</a></DataTable.Data>
         <DataTable.Data>2016-03-04</DataTable.Data>
         <DataTable.Data>description for portal</DataTable.Data>
     </DataTable.Row>

     <DataTable.Row key="wordpress" selected={false} onClick={()=>this.onRowClick(item)}>
         <DataTable.Data><a href="javascript:void(0)">Wordpress blog</a></DataTable.Data>
         <DataTable.Data>2016-01-05</DataTable.Data>
         <DataTable.Data>description for blog</DataTable.Data>
     </DataTable.Row>

     <DataTable.Row key="joomla" selected={false} onClick={()=>this.onRowClick(item)}>
         <DataTable.Data><a href="javascript:void(0)">Joomla website</a></DataTable.Data>
         <DataTable.Data>2015-08-14</DataTable.Data>
         <DataTable.Data>description for website</DataTable.Data>
     </DataTable.Row>

     <DataTable.RowExpandable key="prestashop" expanded={true}>
         <DataTable.Row key="prestashop" selected={true} onClick={()=>this.onRowClick(item)}>
             <DataTable.Data><a href="javascript:void(0)">Prestashop store</a></DataTable.Data>
             <DataTable.Data>2017-01-05</DataTable.Data>
             <DataTable.Data>description for e-commerce solution</DataTable.Data>
         </DataTable.Row>
         <DataTable.DataExpandable>
             additional info when row becomes expanded
         </DataTable.DataExpandable>
     </DataTable.RowExpandable>

</DataTable>

No data available if total size is 0 or noDataAvailable prop is set

<DataTable noDataAvailable={this.props.data.items.length == 0}>
     <DataTable.Column label="Name" name="id" width="25%"/>
     <DataTable.Column label="Blueprint" name="blueprint_id" width="50%"/>
     <DataTable.Column label="Created" name="created_at" width="25%"/>

     {
         this.props.data.items.map((item)=>{
             return (
                 <DataTable.Row key={item.id} selected={item.isSelected} onClick={()=>this.props.onSelectDeployment(item)}>
                     <DataTable.Data><a className='deploymentName' href="javascript:void(0)">{item.id}</a></DataTable.Data>
                     <DataTable.Data>{item.blueprint_id}</DataTable.Data>
                     <DataTable.Data>{item.created_at}</DataTable.Data>
                 </DataTable.Row>
             );
         })
     }

</DataTable>

Show search field

<DataTable searchable>
     ...
</DataTable>