SAPUI5 Smart Table filter not working when place smart table inside a dialog popup - sapui5

I have a sapui5 smarttable inside a fragment that used in a dialog to display the table in a popup.
I've given all the required parameters to the smarttable and smart filter. But when I click the GO button on the filter it doesn't do any thing. (not even a request is calling)
But filter suggestions are displaying when I type some text in a filter field.
Pagination and data displaying also working correctly.
Don't know the reason. Do you have any idea????
Source
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
xmlns:smartTable="sap.ui.comp.smarttable" xmlns:smartField="sap.ui.comp.smartfield" xmlns:unified="sap.ui.unified"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
<smartFilterBar:SmartFilterBar id="actionItemHistoryFilterBar" entitySet="VTicketPOActionItemHistory"
persistencyKey="actionItemHistoryFilterBar_Persis">
<smartFilterBar:controlConfiguration>
<smartFilterBar:ControlConfiguration key="TICKET_ID" index="0" visibleInAdvancedArea="true" preventInitialDataFetchInValueHelpDialog="false"
label="{#i18n>poActionItemHistoryTicketId}"></smartFilterBar:ControlConfiguration>
<smartFilterBar:ControlConfiguration key="PO_NUMBER" index="1" visibleInAdvancedArea="true" preventInitialDataFetchInValueHelpDialog="false"
label="{#i18n>poActionItemHistoryPONumber}"></smartFilterBar:ControlConfiguration>
<smartFilterBar:ControlConfiguration key="ACTION_ITEM" index="2" visibleInAdvancedArea="true"
preventInitialDataFetchInValueHelpDialog="false" label="{#i18n>poActionItemHistoryActionItem}"></smartFilterBar:ControlConfiguration>
<smartFilterBar:ControlConfiguration key="DUE_DATE" index="3" visibleInAdvancedArea="true" preventInitialDataFetchInValueHelpDialog="false"
controlType="date" filterType="interval" label="{#i18n>poActionItemHistoryDueDate}"></smartFilterBar:ControlConfiguration>
<smartFilterBar:ControlConfiguration key="ACTUAL_COMPLETION_DATE" index="3" visibleInAdvancedArea="true"
preventInitialDataFetchInValueHelpDialog="false" controlType="date" filterType="interval"
label="{#i18n>poActionItemHistoryActualCompletionDate}"></smartFilterBar:ControlConfiguration>
</smartFilterBar:controlConfiguration>
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable id="actionItemHistoryTable" entitySet="VTicketPOActionItemHistory" smartFilterId="actionItemHistoryFilterBar"
useExportToExcel="false" useVariantManagement="false" useTablePersonalisation="true" tableType="ResponsiveTable"
header="{i18n>poActionItemHistory}" showRowCount="true" persistencyKey="actionItemHistoryST_persis" enableAutoBinding="false"
demandPopin="true" class="sapUiResponsiveContentPadding"
requestAtLeastFields="PO_NUMBER,TICKET_ID,ACTION_ITEM_ID,DUE_DATE,COMMENT,ACTUAL_COMPLETION_DATE,ACTION_ITEM">
<Table id="articlecoretable" growing="true" growingThreshold="10" mode="MultiSelect" sticky="ColumnHeaders">
<!--sticky="ColumnHeaders"-->
<columns>
<Column id="TICKET_ID" hAlign="Begin">
<customData>
<core:CustomData key="p13nData" value='\{"columnKey": "TICKET_ID", "columnIndex":"0", "leadingProperty": "TICKET_ID"}'/>
</customData>
<Text text="{#i18n>poActionItemHistoryTicketId}"/>
</Column>
<Column id="DUE_DATE" hAlign="Begin">
<customData>
<core:CustomData key="p13nData" value='\{"columnKey": "DUE_DATE", "columnIndex":"3", "leadingProperty": "DUE_DATE"}'/>
</customData>
<Text text="{#i18n>poActionItemHistoryDueDate}"/>
</Column>
<Column id="ACTUAL_COMPLETION_DATE" hAlign="Begin">
<customData>
<core:CustomData key="p13nData"
value='\{"columnKey": "ACTUAL_COMPLETION_DATE", "columnIndex":"4", "leadingProperty": "ACTUAL_COMPLETION_DATE"}'/>
</customData>
<Text text="{#i18n>poActionItemHistoryActualCompletionDate}"/>
</Column>
<Column id="STATUS" hAlign="Begin">
<customData>
<core:CustomData key="p13nData" value='\{"columnKey": "STATUS", "columnIndex":"5", "leadingProperty": "STATUS"}'/>
</customData>
<Text text="{#i18n>poActionItemHistoryStatus}"/>
</Column>
</columns>
<items>
<ColumnListItem type="Active">
<cells>
<Text text="{parts: [{path: 'TICKET_ID'}],formatter: '.formatNumericString'}"/>
<Text text="{parts: [{path: 'DUE_DATE'}],formatter: '.formatter.formatDatetoDisplay'}"/>
<Text text="{parts: [{path: 'ACTUAL_COMPLETION_DATE'}],formatter: '.formatter.formatDatetoDisplay'}"/>
<core:Icon src="sap-icon://alert" class="iconClass" tooltip="{i18n>ammendment_tooltip}"></core:Icon>
</cells>
</ColumnListItem>
</items>
</Table>
</smartTable:SmartTable>
</core:FragmentDefinition>

Related

Adding image in smart table using custom column in sapui5

I have binded my oData table (PLANT) with my smart table in sapui5. I want a custom column where i can display the image. The image src is saved in the oData. I added the custom column but the image is not displayed when the project is run.The field that contains the image link is named as SRC in my oData.
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" controllerName="Workspace.controller.SmartField"
xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" xmlns:smartTable="sap.ui.comp.smarttable">
<smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="PLANT" persistencyKey="SmartFilter_Explored">
<smartFilterBar:controlConfiguration >
<smartFilterBar:ControlConfiguration key="PLANTID" visibleInAdvancedArea="true" preventInitialDataFetchInValueHelpDialog="false"></smartFilterBar:ControlConfiguration>
<smartFilterBar:ControlConfiguration key="STATUS" visibleInAdvancedArea="true" preventInitialDataFetchInValueHelpDialog="false"></smartFilterBar:ControlConfiguration>
</smartFilterBar:controlConfiguration>
<smartFilterBar:layoutData>
<FlexItemData shrinkFactor="0"/>
</smartFilterBar:layoutData>
</smartFilterBar:SmartFilterBar>
<OverflowToolbar design="Transparent">
<SearchField id="searchField" search="onFilterInvoices" liveChange="onSearch" width="20%"></SearchField>
<ToolbarSpacer/>
<OverflowToolbarButton icon="sap-icon://add" text="Add" press="AddRow"/>
<OverflowToolbarButton icon="sap-icon://delete" text="Delete" press="Delete"/>
</OverflowToolbar>
<smartTable:SmartTable id="tableplant" smartFilterId="smartFilterBar" tableType="ResponsiveTable" editable="false" entitySet="PLANT"
initiallyVisibleFields="PLANTID,PTYPE,DESCRIPTION,TYPE,STATUS,ASSIGNED,ATTACHMENT" useVariantManagement="false" demandPopin="true"
class="sapUiResponsiveContentPadding" useTablePersonalisation="true" header="Products" showRowCount="true" useExportToExcel="false"
enableAutoBinding="true">
<Table id="Ptable" growing="true" alternateRowColors="true" growingScrollToLoad="true" width="auto" mode="MultiSelect" >
<columns>
<Column>
<customData>
<core:CustomData key="p13nData"
value='\{"columnKey": "SRC", "leadingProperty": "SRC", "filterProperty": "SRC", "sortProperty": "SRC", "type":"string"}'/>
</customData>
<Text text="IMAGE"/>
</Column>
</columns>
<items>
<ColumnListItem vAlign="Middle" type="Navigation" press="onDetailsEvent">
<cells>
<Image src="{SRC}"/>
</cells>
</ColumnListItem>
</items>
</Table>
<smartTable:layoutData>
<FlexItemData growFactor="1" baseSize="0%"/>
</smartTable:layoutData>
</smartTable:SmartTable>

SAPUI5 sap m table dyanmic columns and items bound in the view

I have a odata service which provides an array of objects which are the column headers. How do I bind this data to my table columns.
I need to dynamically get all of the data of Columns and use this to set my sap m table columns, with the column description using the 'Fieldname' property.
Tried to bind my view data (Columns) to the column, but that doesn't work like it would if you were applying it to the Table component.
<columns items="{view>/Columns}">
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{view>Fieldname}"/>
</Column>
</columns>
Can this be done dynamically through the view?
Below is my current setup with the static columns solution.
<!-- Production Plan Table -->
<Table id="ProdPlanTable" items="{view>/MatchingOrders}" class="table">
<!--Table Header Toolbar-->
<headerToolbar>
<Toolbar class="toolbarHeader sapUiMediumMarginTop">
<content>
<!-- Planner Group filter -->
<VBox>
<Label text="{i18n>PlannerGroupHdr}"/>
<Select id="selectPG" items="{path: 'view>/FilterPlannerGroup', sorter: {path: 'Id'}}" change="onFilterSelect" selectedKey="{view>/FilterPlannerGroup/PlannerGroup}" width="200px">
<items>
<core:ListItem text="{view>PlannerGroup}" key="{view>PlannerGroup}"/>
</items>
</Select>
</VBox>
<!-- Status filter -->
<VBox>
<Label text="{i18n>StatusHdr}"/>
<Select id="selectSTA" items="{path: 'view>/FilterStatus', sorter: {path: 'Id'}}" change="onFilterSelect" selectedKey="{view>/FilterStatus/Status}" width="200px">
<items>
<core:ListItem key="{view>Status}" text="{view>Status}"/>
</items>
</Select>
</VBox>
<!-- Required / Delivered UoM -->
<VBox>
<Label text="{i18n>UoMHdr}"/>
<Select items="{view>/FilterUoM}" change="onUoMSelect" selectedKey="{view>/SelectedUoMId}" width="200px">
<items>
<core:ListItem key="{view>UoMText}" text="{view>UoMText}"/>
</items>
</Select>
</VBox>
<!-- Toolbar Spacer -->
<ToolbarSpacer/>
<!-- Refresh button -->
<VBox>
<Label text=""/>
<Button text="{view>/LastRefreshTimeFormatted}" icon="sap-icon://refresh" type="Accept" press="refreshWithoutFilters"/>
</VBox>
</content>
</Toolbar>
</headerToolbar>
<!-- Headers -->
<!--<columns items="{view>/Columns}">-->
<!-- <Column minScreenWidth="Tablet" demandPopin="true">-->
<!-- <Text text="{view>/Columns/Fieldname}"/>-->
<!-- </Column>-->
<columns>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>PlannerGroup}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>ProcessOrder}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>Info}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>Article}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
<Text text="{i18n>OrderQty}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
<Text text="{i18n>RequiredQty}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
<Text text="{i18n>DeliveredQty}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>Status}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>StartDateTime}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>EndDateTime}"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="{i18n>LongText}"/>
</Column>
</columns>
<!-- Items -->
<items>
<ColumnListItem type="Inactive">
<Text text="{view>PlannerGroup}"/>
<Text text="{view>ProcessOrder}"/>
<Text text="{view>GoodsRecipient}"/>
<ObjectIdentifier title="{view>Article}" text="{view>ArticleDescription}"/>
<ObjectNumber number="{path: 'view>RequiredQty', formatter: '.formatter.numberThousands'}" unit="{view>OrderUOM}"/>
<Text text="{path: 'view>SelectedUoMQty/RequiredQty', formatter: '.formatter.numberThousands'}"/>
<Text text="{path: 'view>SelectedUoMQty/DeliveredQty', formatter: '.formatter.numberThousands'}"/>
<Text text="{view>Status}"/>
<Text text="{path: 'view>StartDay', formatter: '.formatter.date'}, {path: 'view>StartTime', formatter: '.formatter.time'}"/>
<Text text="{path: 'view>EndDay', formatter: '.formatter.date'}, {path: 'view>EndTime', formatter: '.formatter.time'}"/>
<Button icon="{= ${view>LongTextExists} ? 'sap-icon://attachment-text-file' : 'sap-icon://add-document'}" type="{= ${view>LongTextExists} ? 'Emphasized' : 'Default'}" press="onOpenProductionNote"/>
</ColumnListItem>
</items>
</Table>

how do i make sap.m.table to adjust any number of columns without overflowing

I'm using sap.m.table to display data using model that will be set in the controller.But last 2 columns of my table are hidden when displayed due to overflow.Here is my code:
<Table id="table1" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true"
noDataText="{worklistView>/tableNoDataText}" fixedLayout="true" updateFinished="onUpdateFinished" width="auto"
items="{responseListData>/oData}">
<headerToolbar>
<Toolbar>
<Title id="tableHeader" text="{worklistView>/worklistTableTitle}"/>
<ToolbarSpacer/>
<SearchField id="searchField" tooltip="{i18n>worklistSearchTooltip}" search="onSearch" width="auto"></SearchField>
<!--<Button press="onRankSort" id="ranksort" icon="sap-icon://drop-down-list" tooltip="Rank Sort"/>-->
<Button press="onPriceSort" id="pricesort" icon="sap-icon://drop-down-list" tooltip="Price Sort"/>
</Toolbar>
</headerToolbar>
<columns>
<Column width="4rem" id="supplierid" minScreenWidth="Medium" demandPopin="true" hAlign="Begin" >
<Text id="nameColumnTitle" text="Supplier ID"/>
</Column>
<Column width="4rem" id="quanity" hAlign="Begin" demandPopin="false">
<Text text="Qty/Unit"/>
</Column>
<Column width="4rem" id="price" hAlign="Begin" demandPopin="true">
<Text text="Price"/>
</Column>
<Column width="4rem" id="offervaliddate" hAlign="Begin" demandPopin="true" minScreenWidth="Tablet">
<Text text="Offer Valid Until"/>
</Column>
<Column width="4rem" id="tc" hAlign="Begin">
<Text text="T&C"/>
</Column>
<Column width="4rem" id="responsedate" hAlign="End">
<Text text="Delivery Due Date"/>
</Column>
<Column id="attachment" width="4rem" hAlign="End">
<core:Icon src="sap-icon://chain-link" size="1.5em" color="#000">
<core:layoutData>
<FlexItemData growFactor="1"/>
</core:layoutData>
</core:Icon>
</Column>
<Column width="4rem" id="note" hAlign="End">
<Text text="Comment"/>
</Column>
<Column width="4rem" id="rank" hAlign="End" visible="false">
<Text text="Rank"/>
</Column>
<Column width="4rem" id="selected" hAlign="End" visible="false">
<Text text="Selected"/>
</Column>
</columns>
<items>
<ColumnListItem app:createdBy="{responseListData>responseCreatedBy}">
<cells>
<ObjectNumber number="{responseListData>responseCreatedBy}"/>
<Text width="60px" text="{responseListData>sellerQuantity} {responseListData>sellerUnits}"/>
<ObjectNumber number=" {responseListData>sellerPrice}" unit="{responseListData>sellerCurrency}"/>
<Text width="60px" text="{responseListData>offerValidUntil}"/>
<ObjectNumber number="{responseListData>sellerTermsAndConditions}" tooltip="{responseListData>sellerTermsAndConditions}"/>
<Text width="60px" text="{responseListData>sellerDeliveryDueDate}"/>
<Link id="attachmentLink" text="{/oFormData/0/data/fileType}" target="_blank" press="downloadFile"/>
<ObjectNumber number="{responseListData>sellerComments}" tooltip="{responseListData>sellerComments}"/>
<!--<ComboBox enabled="{responseListData>/cBoxEnable}">-->
<!-- <core:Item key="1" text="1" />-->
<!-- <core:Item key="2" text="2" />-->
<!-- <core:Item key="3" text="3" />-->
<!-- <core:Item key="4" text="4" />-->
<!-- <core:Item key="5" text="5" />-->
<!--</ComboBox>-->
<Select width="60px" enabled="{responseListData>comboEnable}" change="changeRank" selectedKey="{responseListData>sellerRank}">
<core:Item key="0" text=" "/>
<core:Item key="1" text="1"/>
<core:Item key="2" text="2"/>
<core:Item key="3" text="3"/>
<core:Item key="4" text="4"/>
<core:Item key="5" text="5"/>
</Select>
<CheckBox id="select" selected="{responseListData>sel1}" enabled="{responseListData>sel}" visible="{responseListData>show}"
select="onSelect" app:createdBy="{responseListData>responseCreatedBy}"/>
<!--<Button enabled="false" text=">" press="move" />-->
</cells>
</ColumnListItem>
</items>
</Table>
What property will help me to adjust all the columns without overflow?I tried adjusting the width but it works in some case and in others i have the same problem
You should remove visible property.

SAPUI5 SmartTable itemPressed - get pressed cell

is there any chance to get the value of the pressed cell in the itemPress event ? I would like to set a tooltip when somebody presses a cell in a column. Alternatively, is it possible to register this event on a cell only ?
I am using SmartTable (responsive -> sap.m.table) based on XML View:
<smartTable:SmartTable
id="kubas"
entitySet="myEntity"
initiallyVisibleFields="absender,empfaenger,nachtyp"
smartFilterId="smartFilterBar"
tableType="ResponsiveTable"
useExportToExcel="true"
useVariantManagement="true"
useTablePersonalisation="true"
header="Entries"
showRowCount="true"
persistencyKey="SmartTableAnalytical_Explored"
enableAutoBinding="true"
demandPopin="true"
class="sapUiResponsiveContentPadding"
dataReceived="onDataReceived"
>
</smartTable:SmartTable>
Or would it be better to somehow incorporate an icon / image to the cells value and set the tooltip for it ?
It is generally not a very good practice to set tooptip by itemPress event of a cell.
Either you can set a tooltip in Column header or you can customize your Column item showing tooltip.
You can customize your inner table of SmartTable, for example, Column header and Column item like below. More info please see here.
<smartTable:SmartTable entitySet="LineItemsSet"
smartFilterId="smartFilterBar" tableType="ResponsiveTable"
useExportToExcel="true" useVariantManagement="false"
useTablePersonalisation="true" header="Line Items" showRowCount="true"
persistencyKey="SmartTableAnalytical_Explored" enableAutoBinding="true"
demandPopin="true" class="sapUiResponsiveContentPadding">
<Table>
<columns>
<Column width="100px" hAlign="Left">
<customData>
<core:CustomData key="p13nData"
value='\{"columnKey": "Dmbtr", "maxLength": "5","columnIndex":"4", "leadingProperty": "Dmbtr"}' />
</customData>
<Text text="{/#LineItems/Dmbtr/#sap:label}" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text
text="{Dmbtr}" />
</cells>
</ColumnListItem>
</items>
</Table>
</smartTable:SmartTable>
Set tooltip for column header if you want to show general information regarding this column.
<columns>
<Column width="100px" hAlign="Left">
<customData>
<core:CustomData key="p13nData"
value='\{"columnKey": "Dmbtr", "maxLength": "5","columnIndex":"4", "leadingProperty": "Dmbtr"}' />
</customData>
<Text text="{/#LineItems/Dmbtr/#sap:label}" tooltip = "YOUR TOOLTIP"/>
</Column>
</columns>
Set tooltip for each individual cell.
<items>
<ColumnListItem>
<cells>
<Text text="{Dmbtr}" tooltip = "YOUR TOOLTIP"/>
</cells>
</ColumnListItem>
</items>
One more thing though, when i wanted to add the second column i was unable to bind it, in terms, the data was not coming from my entitySet, the column remain empty. If i put a hardcoded text, then it gets popuplated. Any clue why ?
<Table growing="true" growingScrollToLoad="true" >
<columns>
<Column hAlign="Left" vAlign="Middle" visible="true" >
<customData>
<core:CustomData key="p13nData"
value='\{"columnKey": "column1", "leadingProperty": "column1", "filterProperty": "column1", "columnIndex":"0"}' />
</customData>
<Text text="Column1" />
</Column>
<Column hAlign="Left" vAlign="Middle" visible="true" >
<customData>
<core:CustomData key="p13nData"
value='\{"columnKey": "column2", "columnIndex":"1"}' />
</customData>
<Text text="Column2" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<HBox>
<core:Icon src="sap-icon://sys-help" />
<ToolbarSpacer width="5px" />
<Text text="{column1}" tooltip="dasda" />
</HBox>
</cells>
<cells>
<Text text="{column2}" tooltip="dasda" />
</cells>
</ColumnListItem>
</items>

SAP UI5 - Change the color of a Custom Data Field in table cell

I am new to SAP UI5 and working my way through the sample Fiori apps. My XML view contains a table control and is as under:
<Table id="idProductsTable" inset="false"
items="{path: '/ShipmentCollection'
}">
<headerToolbar>
<Toolbar>
<Label text="Shipment List"></Label>
<ToolbarSpacer />
<Button icon="sap-icon://refresh" press="refreshDataFromBackend" />
</Toolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Label text="Shipment" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
<Label text="Carrier`" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
<Label text="Dimensions" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
<Label text="Weight" />
</Column>
<Column hAlign="Center">
<Label text="Price" />
</Column>
</columns>
<items>
<ColumnListItem id="listItems" type="Navigation"
press="onListItemPress">
<cells>
<l:VerticalLayout>
<Label text="{ShipNum}"></Label>
<Label text="{Text}"></Label>
</l:VerticalLayout>
<Text text="{Carrier}" />
<Text text="{Route}" />
<Text text="{Cust}" />
<Text text="{DelDate}" />
</cells>
</ColumnListItem>
</items>
</Table>
How can I change the color of Text field in cell-1 based on the contents of this field?
Thanks!
1.You can use data binding formatter to change the color. For example, your first cell.
<Label text="{path:'ShipNum', formatter:'Formatter.colorFormatter'}"></Label>
2.Define yourstyle for changing color in the css file.
3.Define the function colorFormatter in the demoformatter.js
sap.ui.core.Element.extend("demoformatter", {
colorFormatter:function(value) {
this.addStyleClass("yourstyle");
return value;
}
});
Formatter = new demoformatter();
==================xml===================================
<t:Table >
<t:columns>
<t:Column width="11rem">
<Label text="标志" />
<t:template>
<Text text="{
path: 'status',
formatter: 'yaoji.utils.formatter.format'
}"
/>
</t:template>
</t:Column>
</t:columns>
</t:Table>
===================format js===========================
yaoji.utils.formatter.format = function (cellValue) {
this.onAfterRendering= function() {
//!!! if not after redering, can't get the dom
var cellId = this.getId();
$("#"+cellId).parent().parent().parent().css("background- color","red");
return cellValue;
};
Maybe another, uglier option is to just add a updateFinished event handler on the table and then set the classes dynamically there?