fix: Incorrect updation of selctedRowIndex when primary column is set. (#36393)
## Description <ins> Problem statement </ins> 1. Table should have a primary column set. 2. The table should be filtered(via search or client side filters) 3. there should be a selectedRow in table a. One way to ensure is add a text widget and bind it to table's `selectedRowIndex` property. If you now run a query that updates the data behind the table: the `selectedRow` is updated to (seemingly) random row and selectedRowIndex is updated as well <ins> Rootcause </ins> We have a mechanism of preserving `selectedRow` when data updates happen. Underlying logic gets the previous selected row and tries to find it in the new data using the primary key. * If it finds it, it updates the selectedRowIndex to the `__original_index__` of the found row i.e. its position in the original data before any filters were applied. <ins> Solution </ins> We update the selectedRowIndex to the index in the new filtered data. <ins> How to test </ins> 1. Create a table with a primary key 2. Add a text widget and bind it to table's `selectedRowIndex` property 3. Filter the table 4. Click on a row to select it 5. Run a query that updates the data behind the table 6. Assert that the selected row is the same and that the selectedRowIndex is updated to the new index Fixes #36080 _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10953679202> > Commit: 1a2d64467e453229940b67b29da1ce9d0e9ac24d > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10953679202&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Table, @tag.Binding, @tag.Sanity` > Spec: > <hr>Fri, 20 Sep 2024 06:30:08 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **Improvements** - Enhanced the efficiency of the TableWidgetV2 by streamlining the method for retrieving the index of selected rows. - Improved code readability and maintainability without altering the overall functionality. - **New Features** - Introduced new test cases to validate filtering and searching functionalities within the Table Widget V2. - Added a JSON configuration for a data-driven table interface, supporting sorting, filtering, and dynamic data binding. - Introduced fixture data for testing, allowing for comprehensive validation of table behavior under various conditions. - Added a JavaScript object containing employee data to facilitate filtering and display in the table. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Rahul Barwal
GitHub
parent
5998495cf3
commit
6507f90e05
|
|
@ -1,55 +0,0 @@
|
||||||
import EditorNavigation, {
|
|
||||||
EntityType,
|
|
||||||
} from "../../../../../support/Pages/EditorNavigation";
|
|
||||||
|
|
||||||
const widgetsPage = require("../../../../../locators/Widgets.json");
|
|
||||||
const commonlocators = require("../../../../../locators/commonlocators.json");
|
|
||||||
const publish = require("../../../../../locators/publishWidgetspage.json");
|
|
||||||
const dsl = require("../../../../../fixtures/tableV2AndTextDsl.json");
|
|
||||||
|
|
||||||
import * as _ from "../../../../../support/Objects/ObjectsCore";
|
|
||||||
|
|
||||||
describe(
|
|
||||||
"Table Widget V2 Filtered Table data in autocomplete",
|
|
||||||
{ tags: ["@tag.Widget", "@tag.Table", "@tag.Sanity"] },
|
|
||||||
function () {
|
|
||||||
before("Table Widget V2 Functionality", () => {
|
|
||||||
_.agHelper.AddDsl("tableV2AndTextDsl");
|
|
||||||
cy.openPropertyPane("tablewidgetv2");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("1. Table Widget V2 Functionality To Filter and search data", function () {
|
|
||||||
cy.get(publish.searchInput).first().type("query");
|
|
||||||
cy.get(publish.filterBtn).click({ force: true });
|
|
||||||
cy.get(publish.attributeDropdown).click({ force: true });
|
|
||||||
cy.get(publish.attributeValue).contains("task").click({ force: true });
|
|
||||||
cy.get(publish.conditionDropdown).click({ force: true });
|
|
||||||
cy.get(publish.attributeValue)
|
|
||||||
.contains("contains")
|
|
||||||
.click({ force: true });
|
|
||||||
cy.get(publish.tableFilterInputValue).type("bind", { force: true });
|
|
||||||
cy.wait(500);
|
|
||||||
cy.get(widgetsPage.filterApplyBtn).click({ force: true });
|
|
||||||
cy.wait(500);
|
|
||||||
cy.get(".t--close-filter-btn").click({ force: true });
|
|
||||||
});
|
|
||||||
|
|
||||||
it("2. Table Widget V2 Functionality to validate filtered table data", function () {
|
|
||||||
EditorNavigation.SelectEntityByName("Text1", EntityType.Widget);
|
|
||||||
cy.testJsontext("text", "{{Table1.filteredTableData[0].task}}");
|
|
||||||
cy.readTableV2data("0", "1").then((tabData) => {
|
|
||||||
const tableData = tabData;
|
|
||||||
cy.get(commonlocators.labelTextStyle).should("have.text", tableData);
|
|
||||||
});
|
|
||||||
|
|
||||||
//Table Widget V2 Functionality to validate filtered table data with actual table data
|
|
||||||
cy.readTableV2data("0", "1").then((tabData) => {
|
|
||||||
const tableData = JSON.parse(dsl.dsl.children[0].tableData);
|
|
||||||
cy.get(commonlocators.labelTextStyle).should(
|
|
||||||
"have.text",
|
|
||||||
tableData[2].task,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
import EditorNavigation, {
|
||||||
|
EntityType,
|
||||||
|
PageLeftPane,
|
||||||
|
PagePaneSegment,
|
||||||
|
} from "../../../../../support/Pages/EditorNavigation";
|
||||||
|
|
||||||
|
import dsl from "../../../../../fixtures/tableV2AndTextDsl.json";
|
||||||
|
import widgetsPage from "../../../../../locators/Widgets.json";
|
||||||
|
import commonlocators from "../../../../../locators/commonlocators.json";
|
||||||
|
import publish from "../../../../../locators/publishWidgetspage.json";
|
||||||
|
|
||||||
|
import { tableDataJSObject } from "../../../../../fixtures/tableV2FilteringWithPrimaryColumnJSObjectWidthData";
|
||||||
|
import {
|
||||||
|
agHelper,
|
||||||
|
jsEditor,
|
||||||
|
locators,
|
||||||
|
table,
|
||||||
|
} from "../../../../../support/Objects/ObjectsCore";
|
||||||
|
|
||||||
|
describe(
|
||||||
|
"Table Widget V2 Filtered Table data in autocomplete",
|
||||||
|
{ tags: ["@tag.Widget", "@tag.Table", "@tag.Sanity"] },
|
||||||
|
function () {
|
||||||
|
before("Table Widget V2 Functionality", () => {
|
||||||
|
agHelper.AddDsl("tableV2AndTextDsl");
|
||||||
|
agHelper.GetNClick(locators._widgetInCanvas("tablewidgetv2"));
|
||||||
|
});
|
||||||
|
|
||||||
|
it("1. Table Widget V2 Functionality To Filter and search data", function () {
|
||||||
|
table.SearchTable("query");
|
||||||
|
agHelper.GetNClick(publish.filterBtn, 0, true);
|
||||||
|
agHelper.GetNClick(publish.attributeDropdown, 0, true);
|
||||||
|
|
||||||
|
agHelper
|
||||||
|
.GetElement(publish.attributeValue)
|
||||||
|
.contains("task")
|
||||||
|
.click({ force: true });
|
||||||
|
agHelper.GetNClick(publish.conditionDropdown, 0, true);
|
||||||
|
agHelper
|
||||||
|
.GetElement(publish.attributeValue)
|
||||||
|
.contains("contains")
|
||||||
|
.click({ force: true });
|
||||||
|
agHelper.TypeText(publish.tableFilterInputValue, "bind");
|
||||||
|
|
||||||
|
agHelper.GetNClick(widgetsPage.filterApplyBtn, 0, true);
|
||||||
|
table.CloseFilter();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("2. Table Widget V2 Functionality to validate filtered table data", function () {
|
||||||
|
EditorNavigation.SelectEntityByName("Text1", EntityType.Widget);
|
||||||
|
(cy as any).testJsontext("text", "{{Table1.filteredTableData[0].task}}");
|
||||||
|
table.ReadTableRowColumnData(0, 1, "v2").then((tabData: string) => {
|
||||||
|
agHelper.AssertText(
|
||||||
|
commonlocators.labelTextStyle,
|
||||||
|
"text",
|
||||||
|
tabData as string,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
//Table Widget V2 Functionality to validate filtered table data with actual table data
|
||||||
|
const tableData = JSON.parse(dsl.dsl.children[0].tableData as string);
|
||||||
|
agHelper.AssertText(
|
||||||
|
commonlocators.labelTextStyle,
|
||||||
|
"text",
|
||||||
|
tableData[1].task as string,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("3. When primary key is set, selectedRowIndex should not updated after data update", function () {
|
||||||
|
// https://github.com/appsmithorg/appsmith/issues/36080
|
||||||
|
jsEditor.CreateJSObject(tableDataJSObject, {
|
||||||
|
paste: true,
|
||||||
|
completeReplace: true,
|
||||||
|
toRun: false,
|
||||||
|
shouldCreateNewJSObj: true,
|
||||||
|
prettify: true,
|
||||||
|
});
|
||||||
|
jsEditor.CreateJSObject(manipulateDataJSObject, {
|
||||||
|
paste: true,
|
||||||
|
completeReplace: true,
|
||||||
|
toRun: true,
|
||||||
|
shouldCreateNewJSObj: true,
|
||||||
|
prettify: true,
|
||||||
|
});
|
||||||
|
PageLeftPane.switchSegment(PagePaneSegment.UI);
|
||||||
|
|
||||||
|
agHelper.AddDsl("tableV2FilteringWithPrimaryColumn");
|
||||||
|
table.SearchTable("Engineering");
|
||||||
|
table.ReadTableRowColumnData(2, 0, "v2").then((text) => {
|
||||||
|
expect(text).to.equal("Michael Wilson");
|
||||||
|
});
|
||||||
|
|
||||||
|
table.SelectTableRow(2, 0, true, "v2");
|
||||||
|
|
||||||
|
agHelper.GetText(locators._textWidget, "text").then((text) => {
|
||||||
|
agHelper.ClickButton("Submit");
|
||||||
|
|
||||||
|
table.ReadTableRowColumnData(2, 0, "v2").then((text) => {
|
||||||
|
expect(text).to.equal("Michael Wilson1");
|
||||||
|
});
|
||||||
|
agHelper.AssertText(locators._textWidget, "text", text as string);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export const manipulateDataJSObject = `export default {
|
||||||
|
data: JSObject1.initData,
|
||||||
|
makeNewCopy() {
|
||||||
|
const my = _.cloneDeep(this.data);
|
||||||
|
my[5].name =my[5].name+"1";
|
||||||
|
this.data = my;
|
||||||
|
}
|
||||||
|
}`;
|
||||||
|
|
@ -0,0 +1,449 @@
|
||||||
|
{
|
||||||
|
"dsl": {
|
||||||
|
"widgetName": "MainContainer",
|
||||||
|
"backgroundColor": "none",
|
||||||
|
"rightColumn": 4896,
|
||||||
|
"snapColumns": 64,
|
||||||
|
"detachFromLayout": true,
|
||||||
|
"widgetId": "0",
|
||||||
|
"topRow": 0,
|
||||||
|
"bottomRow": 1282,
|
||||||
|
"containerStyle": "none",
|
||||||
|
"snapRows": 124,
|
||||||
|
"parentRowSpace": 1,
|
||||||
|
"type": "CANVAS_WIDGET",
|
||||||
|
"canExtend": true,
|
||||||
|
"version": 90,
|
||||||
|
"minHeight": 1292,
|
||||||
|
"dynamicTriggerPathList": [],
|
||||||
|
"parentColumnSpace": 1,
|
||||||
|
"dynamicBindingPathList": [],
|
||||||
|
"leftColumn": 0,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
|
||||||
|
"borderColor": "#E0DEDE",
|
||||||
|
"isVisibleDownload": true,
|
||||||
|
"topRow": 1,
|
||||||
|
"isSortable": true,
|
||||||
|
"type": "TABLE_WIDGET_V2",
|
||||||
|
"inlineEditingSaveOption": "ROW_LEVEL",
|
||||||
|
"animateLoading": true,
|
||||||
|
"dynamicBindingPathList": [
|
||||||
|
{
|
||||||
|
"key": "accentColor"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "borderRadius"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "boxShadow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "primaryColumns.name.computedValue"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "primaryColumns.department.computedValue"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "primaryColumns.location.computedValue"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "tableData"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "primaryColumns.employeeId.computedValue"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "primaryColumns.position.computedValue"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "primaryColumns.salary.computedValue"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"leftColumn": 0,
|
||||||
|
"delimiter": ",",
|
||||||
|
"defaultSelectedRowIndex": 0,
|
||||||
|
"flexVerticalAlignment": "start",
|
||||||
|
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
|
||||||
|
"isVisibleFilters": true,
|
||||||
|
"isVisible": true,
|
||||||
|
"enableClientSideSearch": true,
|
||||||
|
"version": 2,
|
||||||
|
"totalRecordsCount": 0,
|
||||||
|
"isLoading": false,
|
||||||
|
"childStylesheet": {
|
||||||
|
"button": {
|
||||||
|
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
|
||||||
|
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
||||||
|
"boxShadow": "none"
|
||||||
|
},
|
||||||
|
"menuButton": {
|
||||||
|
"menuColor": "{{appsmith.theme.colors.primaryColor}}",
|
||||||
|
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
||||||
|
"boxShadow": "none"
|
||||||
|
},
|
||||||
|
"iconButton": {
|
||||||
|
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
|
||||||
|
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
||||||
|
"boxShadow": "none"
|
||||||
|
},
|
||||||
|
"editActions": {
|
||||||
|
"saveButtonColor": "{{appsmith.theme.colors.primaryColor}}",
|
||||||
|
"saveBorderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
||||||
|
"discardButtonColor": "{{appsmith.theme.colors.primaryColor}}",
|
||||||
|
"discardBorderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
||||||
|
"columnUpdatedAt": 1726719516718,
|
||||||
|
"primaryColumnId": "employeeId",
|
||||||
|
"defaultSelectedRowIndices": [0],
|
||||||
|
"needsErrorInfo": false,
|
||||||
|
"mobileBottomRow": 35,
|
||||||
|
"widgetName": "Table1",
|
||||||
|
"defaultPageSize": 0,
|
||||||
|
"columnOrder": [
|
||||||
|
"name",
|
||||||
|
"department",
|
||||||
|
"location",
|
||||||
|
"employeeId",
|
||||||
|
"position",
|
||||||
|
"salary"
|
||||||
|
],
|
||||||
|
"dynamicPropertyPathList": [
|
||||||
|
{
|
||||||
|
"key": "tableData"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"bottomRow": 29,
|
||||||
|
"columnWidthMap": {},
|
||||||
|
"parentRowSpace": 10,
|
||||||
|
"mobileRightColumn": 46,
|
||||||
|
"parentColumnSpace": 10.546875,
|
||||||
|
"dynamicTriggerPathList": [],
|
||||||
|
"borderWidth": "1",
|
||||||
|
"primaryColumns": {
|
||||||
|
"name": {
|
||||||
|
"allowCellWrapping": false,
|
||||||
|
"allowSameOptionsInNewRow": true,
|
||||||
|
"index": 1,
|
||||||
|
"width": 150,
|
||||||
|
"originalId": "name",
|
||||||
|
"id": "name",
|
||||||
|
"alias": "name",
|
||||||
|
"horizontalAlignment": "LEFT",
|
||||||
|
"verticalAlignment": "CENTER",
|
||||||
|
"columnType": "text",
|
||||||
|
"textSize": "0.875rem",
|
||||||
|
"enableFilter": true,
|
||||||
|
"enableSort": true,
|
||||||
|
"isVisible": true,
|
||||||
|
"isDisabled": false,
|
||||||
|
"isCellEditable": false,
|
||||||
|
"isEditable": false,
|
||||||
|
"isCellVisible": true,
|
||||||
|
"isDerived": false,
|
||||||
|
"label": "name",
|
||||||
|
"isSaveVisible": true,
|
||||||
|
"isDiscardVisible": true,
|
||||||
|
"computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"name\"]))}}",
|
||||||
|
"sticky": "",
|
||||||
|
"validation": {},
|
||||||
|
"currencyCode": "USD",
|
||||||
|
"decimals": 0,
|
||||||
|
"thousandSeparator": true,
|
||||||
|
"notation": "standard"
|
||||||
|
},
|
||||||
|
"department": {
|
||||||
|
"allowCellWrapping": false,
|
||||||
|
"allowSameOptionsInNewRow": true,
|
||||||
|
"index": 4,
|
||||||
|
"width": 150,
|
||||||
|
"originalId": "department",
|
||||||
|
"id": "department",
|
||||||
|
"alias": "department",
|
||||||
|
"horizontalAlignment": "LEFT",
|
||||||
|
"verticalAlignment": "CENTER",
|
||||||
|
"columnType": "text",
|
||||||
|
"textSize": "0.875rem",
|
||||||
|
"enableFilter": true,
|
||||||
|
"enableSort": true,
|
||||||
|
"isVisible": true,
|
||||||
|
"isDisabled": false,
|
||||||
|
"isCellEditable": false,
|
||||||
|
"isEditable": false,
|
||||||
|
"isCellVisible": true,
|
||||||
|
"isDerived": false,
|
||||||
|
"label": "department",
|
||||||
|
"isSaveVisible": true,
|
||||||
|
"isDiscardVisible": true,
|
||||||
|
"computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"department\"]))}}",
|
||||||
|
"sticky": "",
|
||||||
|
"validation": {},
|
||||||
|
"currencyCode": "USD",
|
||||||
|
"decimals": 0,
|
||||||
|
"thousandSeparator": true,
|
||||||
|
"notation": "standard"
|
||||||
|
},
|
||||||
|
"location": {
|
||||||
|
"allowCellWrapping": false,
|
||||||
|
"allowSameOptionsInNewRow": true,
|
||||||
|
"index": 5,
|
||||||
|
"width": 150,
|
||||||
|
"originalId": "location",
|
||||||
|
"id": "location",
|
||||||
|
"alias": "location",
|
||||||
|
"horizontalAlignment": "LEFT",
|
||||||
|
"verticalAlignment": "CENTER",
|
||||||
|
"columnType": "text",
|
||||||
|
"textSize": "0.875rem",
|
||||||
|
"enableFilter": true,
|
||||||
|
"enableSort": true,
|
||||||
|
"isVisible": true,
|
||||||
|
"isDisabled": false,
|
||||||
|
"isCellEditable": false,
|
||||||
|
"isEditable": false,
|
||||||
|
"isCellVisible": true,
|
||||||
|
"isDerived": false,
|
||||||
|
"label": "location",
|
||||||
|
"isSaveVisible": true,
|
||||||
|
"isDiscardVisible": true,
|
||||||
|
"computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"location\"]))}}",
|
||||||
|
"sticky": "",
|
||||||
|
"validation": {},
|
||||||
|
"currencyCode": "USD",
|
||||||
|
"decimals": 0,
|
||||||
|
"thousandSeparator": true,
|
||||||
|
"notation": "standard"
|
||||||
|
},
|
||||||
|
"employeeId": {
|
||||||
|
"allowCellWrapping": false,
|
||||||
|
"allowSameOptionsInNewRow": true,
|
||||||
|
"index": 0,
|
||||||
|
"width": 150,
|
||||||
|
"originalId": "employeeId",
|
||||||
|
"id": "employeeId",
|
||||||
|
"alias": "employeeId",
|
||||||
|
"horizontalAlignment": "LEFT",
|
||||||
|
"verticalAlignment": "CENTER",
|
||||||
|
"columnType": "number",
|
||||||
|
"textColor": "",
|
||||||
|
"textSize": "0.875rem",
|
||||||
|
"fontStyle": "",
|
||||||
|
"enableFilter": true,
|
||||||
|
"enableSort": true,
|
||||||
|
"isVisible": true,
|
||||||
|
"isDisabled": false,
|
||||||
|
"isCellEditable": false,
|
||||||
|
"isEditable": false,
|
||||||
|
"isCellVisible": true,
|
||||||
|
"isDerived": false,
|
||||||
|
"label": "employeeId",
|
||||||
|
"isSaveVisible": true,
|
||||||
|
"isDiscardVisible": true,
|
||||||
|
"computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"employeeId\"]))}}",
|
||||||
|
"sticky": "",
|
||||||
|
"validation": {},
|
||||||
|
"currencyCode": "USD",
|
||||||
|
"decimals": 0,
|
||||||
|
"thousandSeparator": true,
|
||||||
|
"notation": "standard",
|
||||||
|
"cellBackground": ""
|
||||||
|
},
|
||||||
|
"position": {
|
||||||
|
"allowCellWrapping": false,
|
||||||
|
"allowSameOptionsInNewRow": true,
|
||||||
|
"index": 3,
|
||||||
|
"width": 150,
|
||||||
|
"originalId": "position",
|
||||||
|
"id": "position",
|
||||||
|
"alias": "position",
|
||||||
|
"horizontalAlignment": "LEFT",
|
||||||
|
"verticalAlignment": "CENTER",
|
||||||
|
"columnType": "text",
|
||||||
|
"textColor": "",
|
||||||
|
"textSize": "0.875rem",
|
||||||
|
"fontStyle": "",
|
||||||
|
"enableFilter": true,
|
||||||
|
"enableSort": true,
|
||||||
|
"isVisible": true,
|
||||||
|
"isDisabled": false,
|
||||||
|
"isCellEditable": false,
|
||||||
|
"isEditable": false,
|
||||||
|
"isCellVisible": true,
|
||||||
|
"isDerived": false,
|
||||||
|
"label": "position",
|
||||||
|
"isSaveVisible": true,
|
||||||
|
"isDiscardVisible": true,
|
||||||
|
"computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"position\"]))}}",
|
||||||
|
"sticky": "",
|
||||||
|
"validation": {},
|
||||||
|
"currencyCode": "USD",
|
||||||
|
"decimals": 0,
|
||||||
|
"thousandSeparator": true,
|
||||||
|
"notation": "standard",
|
||||||
|
"cellBackground": ""
|
||||||
|
},
|
||||||
|
"salary": {
|
||||||
|
"allowCellWrapping": false,
|
||||||
|
"allowSameOptionsInNewRow": true,
|
||||||
|
"index": 5,
|
||||||
|
"width": 150,
|
||||||
|
"originalId": "salary",
|
||||||
|
"id": "salary",
|
||||||
|
"alias": "salary",
|
||||||
|
"horizontalAlignment": "LEFT",
|
||||||
|
"verticalAlignment": "CENTER",
|
||||||
|
"columnType": "number",
|
||||||
|
"textColor": "",
|
||||||
|
"textSize": "0.875rem",
|
||||||
|
"fontStyle": "",
|
||||||
|
"enableFilter": true,
|
||||||
|
"enableSort": true,
|
||||||
|
"isVisible": true,
|
||||||
|
"isDisabled": false,
|
||||||
|
"isCellEditable": false,
|
||||||
|
"isEditable": false,
|
||||||
|
"isCellVisible": true,
|
||||||
|
"isDerived": false,
|
||||||
|
"label": "salary",
|
||||||
|
"isSaveVisible": true,
|
||||||
|
"isDiscardVisible": true,
|
||||||
|
"computedValue": "{{Table1.processedTableData.map((currentRow, currentIndex) => ( currentRow[\"salary\"]))}}",
|
||||||
|
"sticky": "",
|
||||||
|
"validation": {},
|
||||||
|
"currencyCode": "USD",
|
||||||
|
"decimals": 0,
|
||||||
|
"thousandSeparator": true,
|
||||||
|
"notation": "standard",
|
||||||
|
"cellBackground": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"key": "1vnt7cehmt",
|
||||||
|
"canFreezeColumn": true,
|
||||||
|
"rightColumn": 64,
|
||||||
|
"textSize": "0.875rem",
|
||||||
|
"widgetId": "gt19wbzlit",
|
||||||
|
"minWidth": 450,
|
||||||
|
"tableData": "{{JSObject2.data}}",
|
||||||
|
"label": "Data",
|
||||||
|
"searchKey": "",
|
||||||
|
"parentId": "0",
|
||||||
|
"renderMode": "CANVAS",
|
||||||
|
"mobileTopRow": 7,
|
||||||
|
"horizontalAlignment": "LEFT",
|
||||||
|
"isVisibleSearch": true,
|
||||||
|
"responsiveBehavior": "fill",
|
||||||
|
"mobileLeftColumn": 12,
|
||||||
|
"isVisiblePagination": true,
|
||||||
|
"verticalAlignment": "CENTER"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"needsErrorInfo": false,
|
||||||
|
"mobileBottomRow": 44,
|
||||||
|
"widgetName": "Text1",
|
||||||
|
"topRow": 34,
|
||||||
|
"bottomRow": 38,
|
||||||
|
"parentRowSpace": 10,
|
||||||
|
"type": "TEXT_WIDGET",
|
||||||
|
"mobileRightColumn": 18,
|
||||||
|
"animateLoading": true,
|
||||||
|
"overflow": "NONE",
|
||||||
|
"fontFamily": "{{appsmith.theme.fontFamily.appFont}}",
|
||||||
|
"parentColumnSpace": 10.546875,
|
||||||
|
"dynamicTriggerPathList": [],
|
||||||
|
"leftColumn": 2,
|
||||||
|
"dynamicBindingPathList": [
|
||||||
|
{
|
||||||
|
"key": "truncateButtonColor"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "fontFamily"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "borderRadius"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "text"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"shouldTruncate": false,
|
||||||
|
"truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}",
|
||||||
|
"text": "{{Table1.selectedRowIndex}}",
|
||||||
|
"key": "dlet8mfjip",
|
||||||
|
"rightColumn": 18,
|
||||||
|
"textAlign": "LEFT",
|
||||||
|
"dynamicHeight": "AUTO_HEIGHT",
|
||||||
|
"widgetId": "irgoh659po",
|
||||||
|
"minWidth": 450,
|
||||||
|
"isVisible": true,
|
||||||
|
"fontStyle": "BOLD",
|
||||||
|
"textColor": "#231F20",
|
||||||
|
"version": 1,
|
||||||
|
"parentId": "0",
|
||||||
|
"renderMode": "CANVAS",
|
||||||
|
"isLoading": false,
|
||||||
|
"mobileTopRow": 40,
|
||||||
|
"responsiveBehavior": "fill",
|
||||||
|
"originalTopRow": 40,
|
||||||
|
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
||||||
|
"mobileLeftColumn": 2,
|
||||||
|
"maxDynamicHeight": 9000,
|
||||||
|
"originalBottomRow": 44,
|
||||||
|
"fontSize": "1rem",
|
||||||
|
"minDynamicHeight": 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"resetFormOnClick": false,
|
||||||
|
"needsErrorInfo": false,
|
||||||
|
"boxShadow": "none",
|
||||||
|
"mobileBottomRow": 44,
|
||||||
|
"widgetName": "Button1",
|
||||||
|
"onClick": "{{JSObject2.makeNewCopy();}}",
|
||||||
|
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
|
||||||
|
"topRow": 34,
|
||||||
|
"bottomRow": 38,
|
||||||
|
"parentRowSpace": 10,
|
||||||
|
"type": "BUTTON_WIDGET",
|
||||||
|
"mobileRightColumn": 55,
|
||||||
|
"animateLoading": true,
|
||||||
|
"parentColumnSpace": 10.546875,
|
||||||
|
"dynamicTriggerPathList": [
|
||||||
|
{
|
||||||
|
"key": "onClick"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"leftColumn": 39,
|
||||||
|
"dynamicBindingPathList": [
|
||||||
|
{
|
||||||
|
"key": "buttonColor"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "borderRadius"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"text": "Submit",
|
||||||
|
"isDisabled": false,
|
||||||
|
"key": "mzyu2305os",
|
||||||
|
"rightColumn": 55,
|
||||||
|
"isDefaultClickDisabled": true,
|
||||||
|
"widgetId": "q29byryymd",
|
||||||
|
"minWidth": 120,
|
||||||
|
"isVisible": true,
|
||||||
|
"recaptchaType": "V3",
|
||||||
|
"version": 1,
|
||||||
|
"parentId": "0",
|
||||||
|
"renderMode": "CANVAS",
|
||||||
|
"isLoading": false,
|
||||||
|
"mobileTopRow": 40,
|
||||||
|
"responsiveBehavior": "hug",
|
||||||
|
"disabledWhenInvalid": false,
|
||||||
|
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
||||||
|
"mobileLeftColumn": 39,
|
||||||
|
"buttonVariant": "PRIMARY",
|
||||||
|
"placement": "CENTER"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
export const tableDataJSObject = `export default {
|
||||||
|
initData :[
|
||||||
|
{
|
||||||
|
"employeeId": 101,
|
||||||
|
"name": "John Doe",
|
||||||
|
"department": "Engineering",
|
||||||
|
"position": "Software Engineer",
|
||||||
|
"location": "San Francisco",
|
||||||
|
"salary": 120000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"employeeId": 102,
|
||||||
|
"name": "Jane Smith",
|
||||||
|
"department": "Engineering",
|
||||||
|
"position": "DevOps Engineer",
|
||||||
|
"location": "New York",
|
||||||
|
"salary": 115000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"employeeId": 103,
|
||||||
|
"name": "Alice Johnson",
|
||||||
|
"department": "Marketing",
|
||||||
|
"position": "Marketing Manager",
|
||||||
|
"location": "Chicago",
|
||||||
|
"salary": 90000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"employeeId": 104,
|
||||||
|
"name": "Robert Brown",
|
||||||
|
"department": "Sales",
|
||||||
|
"position": "Sales Executive",
|
||||||
|
"location": "Los Angeles",
|
||||||
|
"salary": 95000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"employeeId": 105,
|
||||||
|
"name": "Linda Davis",
|
||||||
|
"department": "HR",
|
||||||
|
"position": "HR Manager",
|
||||||
|
"location": "San Francisco",
|
||||||
|
"salary": 85000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"employeeId": 106,
|
||||||
|
"name": "Michael Wilson",
|
||||||
|
"department": "Engineering",
|
||||||
|
"position": "Frontend Developer",
|
||||||
|
"location": "San Francisco",
|
||||||
|
"salary": 105000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"employeeId": 107,
|
||||||
|
"name": "Emily Clark",
|
||||||
|
"department": "Marketing",
|
||||||
|
"position": "Content Specialist",
|
||||||
|
"location": "Chicago",
|
||||||
|
"salary": 75000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"employeeId": 108,
|
||||||
|
"name": "David Martinez",
|
||||||
|
"department": "Sales",
|
||||||
|
"position": "Sales Manager",
|
||||||
|
"location": "New York",
|
||||||
|
"salary": 110000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"employeeId": 109,
|
||||||
|
"name": "Sarah Lee",
|
||||||
|
"department": "HR",
|
||||||
|
"position": "Recruiter",
|
||||||
|
"location": "Los Angeles",
|
||||||
|
"salary": 70000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"employeeId": 110,
|
||||||
|
"name": "James Anderson",
|
||||||
|
"department": "Engineering",
|
||||||
|
"position": "Backend Developer",
|
||||||
|
"location": "New York",
|
||||||
|
"salary": 118000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}`;
|
||||||
|
|
@ -19,7 +19,6 @@ import {
|
||||||
DEFAULT_BUTTON_COLOR,
|
DEFAULT_BUTTON_COLOR,
|
||||||
DEFAULT_COLUMN_WIDTH,
|
DEFAULT_COLUMN_WIDTH,
|
||||||
TABLE_COLUMN_ORDER_KEY,
|
TABLE_COLUMN_ORDER_KEY,
|
||||||
ORIGINAL_INDEX_KEY,
|
|
||||||
} from "../constants";
|
} from "../constants";
|
||||||
import { SelectColumnOptionsValidations } from "./propertyUtils";
|
import { SelectColumnOptionsValidations } from "./propertyUtils";
|
||||||
import type { TableWidgetProps } from "../constants";
|
import type { TableWidgetProps } from "../constants";
|
||||||
|
|
@ -65,13 +64,7 @@ export const getOriginalRowIndex = (
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!!primaryKey && tableData) {
|
if (!!primaryKey && tableData) {
|
||||||
const selectedRow = tableData.find(
|
index = tableData.findIndex((row) => row[primaryColumnId] === primaryKey);
|
||||||
(row) => row[primaryColumnId] === primaryKey,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (selectedRow) {
|
|
||||||
index = selectedRow[ORIGINAL_INDEX_KEY] as number;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return index;
|
return index;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user