With Filter

Example

Filter by Category:

Products by Category

Category

Beverages

Chai

10 boxes x 20 bags

$18.00

Beverages

Chang

24 - 12 oz bottles

$19.00

Beverages

Guaraná Fantástica

12 - 355 ml cans

$4.50

Beverages

Sasquatch Ale

24 - 12 oz bottles

$14.00

111

Beverages

Steeleye Stout

24 - 12 oz bottles

$18.00

Beverages

Côte de Blaye

12 - 75 cl bottles

$263.50

Beverages

Chartreuse verte

750 cc per bottle

$18.00

Beverages

Ipoh Coffee

16 - 500 g tins

$46.00

Beverages

Laughing Lumberjack Lager

24 - 12 oz bottles

$14.00

Beverages

Outback Lager

24 - 355 ml bottles

$15.00

Beverages

Rhönbräu Klosterbier

24 - 0.5 l bottles

$7.75

125

Beverages

Lakkalikööri

500 ml

$18.00

This Data Table element includes:

Minimal attribute settings
Custom theme
Alternating row background color
Draggable and sortable columns
Filtering using a Request token

<DataTable ID="dtBasicTable1" DraggableColumns="True" AjaxPaging="True" RememberSort="True" SortArrows="True" AltRowClass="ThemeAlternatingRow" Class="ThemeAlignLeft" Width="900" WidthScale="px" ResizableColumns="True" IdeDisplayStatus="Collapsed">
  <DataLayer Type="XMLFile" XMLFile="NW_Products.xml" ID="dlProductsXML" IdeDisplayStatus="Collapsed">
    <CompareFilter DataColumn="CategoryID" ID="fltCompare" CompareType="=" CompareValue="1" DataType="Number" />
    <Join ID="joinInner" JoinType="InnerJoin" IdeDisplayStatus="Collapsed">
      <MatchCondition LeftDataColumn="CategoryID" RightDataColumn="CategoryID" DataType="Number" />
      <DataLayer Type="XMLFile" XMLFile="NW_Categories.xml" ID="dlCategoriesXML2" />
    </Join>
  </DataLayer>
  <DataTableColumn Header="Category" IdeDisplayStatus="Collapsed" ID="colCategoryName">
    <Label Caption="" ID="lblCategoryName" />
  </DataTableColumn>
  <DataTableColumn ID="colProductID" Header="Product ID" IdeDisplayStatus="Collapsed" Class="ThemeAlignCenter">
    <Label ID="lblProductID" Caption="" />
    <DataColumnSort DataColumn="ProductID" DataType="Number" />
  </DataTableColumn>
  <DataTableColumn ID="colProductName" Header="Product Name" IdeDisplayStatus="Collapsed">
    <Label ID="lblProductName" Caption="" />
    <DataColumnSort DataColumn="ProductName" />
  </DataTableColumn>
  <DataTableColumn ID="colQuantityPerUnit" Header="Quantity/Unit" IdeDisplayStatus="Collapsed">
    <Label ID="lblQuantityPerUnit" Caption="" />
    <DataColumnSort DataColumn="QuantityPerUnit" />
  </DataTableColumn>
  <DataTableColumn ID="colUnitPrice" Header="Unit Price" Class="ThemeAlignRight" IdeDisplayStatus="Collapsed">
    <Label ID="lblUnitPrice" Caption="" Format="Currency" />
    <DataColumnSort DataColumn="UnitPrice" DataType="Number" />
  </DataTableColumn>
  <DataTableColumn ID="colUnitsInStock" Header="Units In Stock" Class="ThemeAlignRight" IdeDisplayStatus="Collapsed">
    <Label ID="lblUnitsInStock" Caption="" />
    <DataColumnSort DataColumn="UnitsInStock" DataType="Number" />
  </DataTableColumn>
</DataTable>