Tables

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Step 2: Include pagination css in Logi Info Application Include pagination css in Logi Info Application

Simple Example

HTML

<table class="table">
  ...
</table>

Logi XML

<DataTable Class="table">
   <DataLayer ID="dlStatic" Type="Static">
      <StaticDataRow id="276" Name="Row Name" col_1="687" col_2="4985" col_3="Yes" col_4=".08" />
   </DataLayer>
   <AutoColumns />
</DataTable>

Tables

Default example

The following is an example of the .table classes used in the main datatable class.

id	Name	col_1	col_2	col_3	col_4
276	Row Name	687	4985	Yes	.08
641	Row Name	251	1234	No	.40
982	Row Name	381	1647	No	.31
123	Row Name	813	9816	No	.72
365	Row Name	631	218	Yes	.12
872	Row Name	518	9411	Yes	.86
83	Row Name	798	5676	No	.67

<DataTable AjaxPaging="True" Class="table" ID="dtDefault">
  <DataLayer ID="staticDlDefault" Type="Static">
    <StaticDataRow col_1="687" col_2="4985" col_3="Yes" col_4=".08" id="276" Name="Row Name" />
  </DataLayer>
   <AutoColumns />
</DataTable>

Small table

The following is an example of the table table-sm class.

col_1	col_2	col_3	col_4	id	Name
687	4985	Yes	.08	276	Row Name
251	1234	No	.40	641	Row Name
381	1647	No	.31	982	Row Name
813	9816	No	.72	123	Row Name
631	218	Yes	.12	365	Row Name
518	9411	Yes	.86	872	Row Name
798	5676	No	.67	83	Row Name

<DataTable AjaxPaging="True" Class="table table-sm" ID="dtCondensed">
  <DataLayer ID="staticDlCondensed" Type="Static">
    <StaticDataRow col_1="687" col_2="4985" col_3="Yes" col_4=".08" id="276" Name="Row Name" />
  </DataLayer>
  <AutoColumns />
</DataTable>

Dark example

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

col_1	col_2	col_3	col_4	id	Name
687	4985	Yes	.08	276	Row Name
251	1234	No	.40	641	Row Name
381	1647	No	.31	982	Row Name
813	9816	No	.72	123	Row Name
631	218	Yes	.12	365	Row Name
518	9411	Yes	.86	872	Row Name
798	5676	No	.67	83	Row Name

<DataTable AjaxPaging="True" Class="table table-dark" ID="dtDark">
  <DataLayer ID="staticDlDark" Type="Static">
    <StaticDataRow col_1="687" col_2="4985" col_3="Yes" col_4=".08" id="276" Name="Row Name" />
  </DataLayer>
  <AutoColumns />
</DataTable>

Striped example

The following is an example of the table table-striped class.

col_1	col_2	col_3	col_4	id	Name
687	4985	Yes	.08	276	Row Name
251	1234	No	.40	641	Row Name
381	1647	No	.31	982	Row Name
813	9816	No	.72	123	Row Name
631	218	Yes	.12	365	Row Name
518	9411	Yes	.86	872	Row Name
798	5676	No	.67	83	Row Name

<DataTable Class="table table-striped" ID="dtStriped">
   <DataLayer ID="dlStatic" Type="Static">
      <StaticDataRow id="276" Name="Row Name" col_1="687" col_2="4985" col_3="Yes" col_4=".08" />
   </DataLayer>
   <AutoColumns />
</DataTable>

Bordered example

The following is an example of the table table-bordered class.

col_1	col_2	col_3	col_4	id	Name
687	4985	Yes	.08	276	Row Name
251	1234	No	.40	641	Row Name
381	1647	No	.31	982	Row Name
813	9816	No	.72	123	Row Name
631	218	Yes	.12	365	Row Name
518	9411	Yes	.86	872	Row Name
798	5676	No	.67	83	Row Name

<DataTable Class="table table-bordered" ID="dtBordered">
   <DataLayer ID="dlStatic" Type="Static">
      <StaticDataRow id="276" Name="Row Name" col_1="687" col_2="4985" col_3="Yes" col_4=".08" />
   </DataLayer>
   <AutoColumns />
</DataTable>

Hover example

The following is an example of the table table-hover class.

col_1	col_2	col_3	col_4	id	Name
687	4985	Yes	.08	276	Row Name
251	1234	No	.40	641	Row Name
381	1647	No	.31	982	Row Name
813	9816	No	.72	123	Row Name
631	218	Yes	.12	365	Row Name
518	9411	Yes	.86	872	Row Name
798	5676	No	.67	83	Row Name

<DataTable Class="table table-hover" ID="dtHover">
   <DataLayer ID="dlStatic" Type="Static">
      <StaticDataRow id="276" Name="Row Name" col_1="687" col_2="4985" col_3="Yes" col_4=".08" />
   </DataLayer>
   <AutoColumns />
</DataTable>

Standard Table With Row Colors

The following is an example of the .table-active class used on a table row and table cell.

Row 1 is using the `.table-active` class
Row 1 is using the `.table-success` class
Row 1 is using the `.table-warning` class
Row 1 is using the `.table-danger` class
Row 1 is using the `.table-info` class
Row 1 is using the `.table-primary` class
Row 1 is using the `.table-light` class
Row 1 is using the `.table-dark` class
Column class `.table-active`	Column class `.table-success`	Column class `.table-warning`	Column class `.table-danger`	Column class `.table-info`	Column class `.table-primary`	Column class `.table-light`	Column class `.table-dark`

<Rows Class="table">
  <Row Class="table-active">
    <Column ColSpan="8">
      <Label Caption="..." />
    </Column>
  </Row>
  <Row Class="table-success">
    <Column ColSpan="8">
      <Label Caption="..." />
    </Column>
  </Row>
  <Row Class="table-warning">
    <Column ColSpan="8">
      <Label Caption="..." />
    </Column>
  </Row>
  <Row Class="table-danger">
    <Column ColSpan="8">
      <Label Caption="..." />
    </Column>
  </Row>
  <Row Class="table-info">
    <Column ColSpan="8">
      <Label Caption="..." />
    </Column>
  </Row>
  <Row Class="table-primary">
    <Column ColSpan="8">
      <Label Caption="..." />
    </Column>
  </Row>
  <Row Class="table-light">
    <Column ColSpan="8">
      <Label Caption="..." />
    </Column>
  </Row>
  <Row Class="table-dark">
    <Column ColSpan="8">
      <Label Caption="..." />
    </Column>
  </Row>
  <Row>
    <Column Class="table-active">
      <Label Caption="..." />
    </Column>
    <Column Class="table-success">
      <Label Caption="..." />
    </Column>
    <Column Class="table-warning">
      <Label Caption="..." />
    </Column>
    <Column Class="table-danger">
      <Label Caption="..." />
    </Column>
    <Column Class="table-info">
      <Label Caption="..." />
    </Column>
    <Column Class="table-primary">
      <Label Caption="..." />
    </Column>
    <Column Class="table-light">
      <Label Caption="..." />
    </Column>
    <Column Class="table-dark">
      <Label Caption="..." />
    </Column>
  </Row>
</Rows>

<Rows Class="table"> <Row Class="active"> <Column ColSpan="5"> <Label Caption="Row 1 is using the <code>.active</code> class" Format="HTML" /> </Column> </Row> <Row Class="success"> <Column ColSpan="5"> <Label Caption="Row 1 is using the <code>.success</code> class" Format="HTML" /> </Column> </Row> <Row Class="warning"> <Column ColSpan="5"> <Label Caption="Row 1 is using the <code>.warning</code> class" Format="HTML" /> </Column> </Row> <Row Class="danger"> <Column ColSpan="5"> <Label Caption="Row 1 is using the <code>.danger</code> class" Format="HTML" /> </Column> </Row> <Row Class="info"> <Column ColSpan="5"> <Label Caption="Row 1 is using the <code>.info</code> class" Format="HTML" /> </Column> </Row> <Row> <Column Class="active"> <Label Caption="Column class <code>.active</code>" Format="HTML" /> </Column> <Column Class="success"> <Label Caption="Column class <code>.success</code>" Format="HTML" /> </Column> <Column Class="warning"> <Label Caption="Column class <code>.warning</code>" Format="HTML" /> </Column> <Column Class="danger"> <Label Caption="Column class <code>.danger</code>" Format="HTML" /> </Column> <Column Class="info"> <Label Caption="Column class <code>.info</code>" Format="HTML" /> </Column> </Row> </Rows>

Striped Dark example

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

col_1	col_2	col_3	col_4	id	Name
687	4985	Yes	.08	276	Row Name
251	1234	No	.40	641	Row Name
381	1647	No	.31	982	Row Name
813	9816	No	.72	123	Row Name
631	218	Yes	.12	365	Row Name
518	9411	Yes	.86	872	Row Name
798	5676	No	.67	83	Row Name

<DataTable Class="table table-striped table-dark" ID="dtDarkStriped">
  <DataLayer ID="staticDlDarkStriped" Type="Static">
    <StaticDataRow col_1="687" col_2="4985" col_3="Yes" col_4=".08" id="276" Name="Row Name" />
  </DataLayer>
  <AutoColumns />
</DataTable>

Table Responsive

Example

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

id	Name	col_1	col_2	col_3	col_4
276	Row Name	687	4985	Yes	.08
641	Row Name	251	1234	No	.40
982	Row Name	381	1647	No	.31
123	Row Name	813	9816	No	.72
365	Row Name	631	218	Yes	.12
872	Row Name	518	9411	Yes	.86
83	Row Name	798	5676	No	.67

<Division Class="table-responsive" HtmlDiv="True">
   <DataTable Class="table table-hover table-striped table-condensed" ID="dtDefault">
      <DataLayer ID="dlStatic" Type="Static">
         <StaticDataRow id="276" Name="Row Name" col_1="687" col_2="4985" col_3="Yes" col_4=".08" />
      </DataLayer>
      <AutoColumns />
   </DataTable>
</Division>

Pagination

Default Pagination

Add new style to the interactive paging element.

1 2 3 4 5 6 7 8 > >>

ProductID	Product Name	Quantity Per Unit	Price	Units In Stock	Units On Order	Reorder Level
1	Chai	10 boxes x 20 bags	$18.00	39	0	10
2	Chang	24 - 12 oz bottles	$19.00	17	40	25
3	Aniseed Syrup	12 - 550 ml bottles	$10.00	13	70	25
4	Chef Anton's Cajun Seasoning	48 - 6 oz jars	$22.00	53	0	0
5	Chef Anton's Gumbo Mix	36 boxes	$21.35	0	0	0
6	Grandma's Boysenberry Spread	12 - 8 oz jars	$25.00	120	0	25
7	Uncle Bob's Organic Dried Pears	12 - 1 lb pkgs.	$30.00	15	0	10
8	Northwoods Cranberry Sauce	12 - 12 oz jars	$40.00	6	0	0
9	Mishi Kobe Niku	18 - 500 g pkgs.	$97.00	29	0	0
10	Ikura	12 - 200 ml jars	$31.00	31	0	0

<DataTable Class="table table-striped" ID="dtPagination">
   <InteractivePaging 
	PageRowCount="20" 
	ShowPageNumber="Numbered" 
	Location="Bottom" 
	HideShowPrevNextCaptions="True" 
	CaptionType="Text" 
	HideWhenOnePage="True" />
   <DataLayer ID="dlStatic" Type="Static">
      <StaticDataRow id="276" Name="Row Name" col_1="687" col_2="4985" col_3="Yes" col_4=".08" />
   </DataLayer>
   <AutoColumns />
</DataTable>