diff --git a/website/docs/reference/widgets/table/column-settings.md b/website/docs/reference/widgets/table/column-settings.md
index 50de327d2e..fda584288e 100644
--- a/website/docs/reference/widgets/table/column-settings.md
+++ b/website/docs/reference/widgets/table/column-settings.md
@@ -4,33 +4,61 @@ import TabItem from '@theme/TabItem';
# Column
-You can customize each table column separately by accessing properties through the gear icon ⚙️ in the table's properties pane. This includes editing existing column properties, adding new custom columns, rearranging columns, and hiding columns.
+You can customize each Table column separately by accessing properties through the gear icon ⚙️ in the Table's properties pane. This includes editing existing column properties, adding new custom columns, rearranging columns, and hiding columns.
-
+
+## Content properties
-### Computed value
+These properties are customizable options available in the property pane of the Column settings.
-In the Table widget, computed value is a column property that allows you to display and manipulate the table data using JavaScript expressions. To make use of this feature, you can use the `currentRow` property within the column settings.
+### Column Types
-The `currentRow` property is automatically generated by default in the Table widget when you add data to the table. For instance, the computed value of a column named `dob` that displays the date of birth for each row would be `{{currentRow['dob']}}`. Additionally, you can also create custom expressions that compute new values based on the data in the current row.
+
-----
-**Example**: suppose you have a table with a `name` column and a `gender` column. If you want to add a prefix of `Mr.` or `Mrs.` to the names in the `name` column based on the data in the `gender` column, you can use a computed value.
+This property allows you to select the appropriate column type for your Table data. Each column type serves a specific function and enhances interactivity. The available column types are:
-1. Fetch data from the sample **users** database using a SELECT query `fetchData` to retrieve the data:
-```sql
-SELECT * FROM users ORDER BY id LIMIT 10;
-```
-2. In the Table's **Table Data** property, display the data using:
+- **Button:** A clickable cell that triggers an onClick event, allowing users to perform actions directly from the Table. The [triggeredRow](/reference/widgets/table#triggeredrow-object) reference property retrieves data from the corresponding row, making it easy to reference that specific entry.
-```
-{{fetchData.data}}
+- **Checkbox:** Represents a binary value (True/False) and displays checked and unchecked states. You can interact with this column to toggle values. If the Editable property is enabled, you can modify the state directly. If the Editable property is disabled, selecting the checkbox is not possible.
+
+- **Icon Button**: A button that displays an icon instead of text. You can configure the onClick event to trigger specific actions. The `triggeredRow` reference property retrieves data from the associated row, similar to the Button type.
+
+- **Image**: Displays images by interpreting the cell value as an image source URL or base64 data. If the data is invalid, the cell displays `Invalid Image`.
+
+- **Menu Button**: A set of buttons that expands into a menu when interacted with. You can dynamically add menu items by setting the [Menu items source](/reference/widgets/table/column-settings#menu-items-source-string) to Dynamic, referencing `{{currentRow}}` in the Source Data property for easy integration with the Table's data.
+
+- **Number**: Designed for numeric data entry, this column type supports inline editing, allowing modification of values directly within the Table.
+
+- **Plain Text**: Displays readable characters for clear understanding. This column type supports inline editing, allowing direct text updates when the Editable property is enabled.
+
+- **Switch**: A toggle feature that allows you to turn an item on or off, representing binary values. This column type supports inline editing, allowing direct text updates when the Editable property is enabled.
+
+- **URL**: Treats the cell value as a hyperlink, allowing clicks on the cell to open the corresponding URL in a new browser tab. Ensure to include both the domain and suffix of the URL for proper functionality.
+
+- **Video**: Displays videos directly within the Table. You can add videos by providing a source file path or URL from supported platforms like YouTube, Facebook, Twitch, and others, enhancing multimedia engagement.
+
+- **Date**: Supports custom formatting options for date and time information. You can format and display the date using the Date Format and Display Format properties. This column type supports inline editing, allowing direct text updates when the Editable property is enabled.
+
+- **Select**: Enables choosing from a predefined list of options. The Options property should be an array of objects. This column type supports inline editing, allowing direct text updates when the Editable property is enabled. See [Select properties](/reference/widgets/table/column-settings#select-properties).
+
+
+
+### Computed value
+
+
+
+This property allows you to display and manipulate Table data using JavaScript expressions. The `currentRow` property is automatically generated when data is added to the Table, representing the current row's data.
+
+*Example:* To display a date of birth in a column named `dob`, use:
+
+```js
+{{currentRow['dob']}}
```
-3. Select the `name` column from the list of columns, and add following code in the **Computed Value** property:
+*Example 2*: If you want to add a prefix like `Mr`. or `Mrs.` to names in the name column based on the `gender` column, you can use a computed value:
```js
{{currentRow.gender === "male" ? "Mr " + currentRow.name : "Mrs " + currentRow.name}}
@@ -38,49 +66,182 @@ SELECT * FROM users ORDER BY id LIMIT 10;
The code uses a ternary operator to add a prefix of `Mr.` or `Mrs.` to the name column based on the value of the gender column in the current row.
-
+
+
-## Cell Background Color (Column Color)
+#### Currency `string`
+
+
+This property allows you to specify the currency type for the column. You can select from a list of countries and their corresponding currencies. Additionally, by enabling the *JS* option, you can use `ISO 4217` currency codes, which are three-letter codes assigned to each currency for international identification.
+
+
-You can style each column type from the style property pane, including options to change column color. However, if you need more advanced customization, such as changing table color/column color, you can use the `currentRow` and `currentIndex` references to create custom color expressions. These expressions enable you to conditionally change color and style of individual cells based on their content, offering more flexibility than simply applying a static style to an entire column.
+#### Decimals Allowed `number`
+
+
+
+This property defines the maximum number of decimal places permitted. You can set it to `0`, `1`, or `2`, depending on the level of precision required for the numeric value. This setting is only applicable when the column type is set to Currency.
+
+
+
+#### Notation `string`
+
+
+
+
+This property determines how the currency is displayed. It offers two options:
+
+- **Standard**: Displays the full currency value (e.g., $1,000.00).
+
+- **Compact**: Displays the currency in a shorter format (e.g., $1K for 1,000).
+
+This setting is applicable only when the column type is set to Currency.
+
+
+
+
+
+
+#### Date Format `string`
+
+
+This property specifies how incoming date data is formatted in the **Computed Value** property. For instance, if the incoming date is in the format `YYYY-MM-DD HH:mm` and matches the **Date Format** property, the date displays correctly. If the formats do not match, the column shows `Invalid date`. This setting applies only when the column type is set to Date.
+
+
+
+
+#### Display Format `string`
+
+
+
+This property determines how the date appears to the user. For example, if the incoming date is in the format `YYYY-MM-DD` and you want to display it as `DD/MM/YYYY`, the date shows up in the selected format. This setting applies only when the column type is set to Date.
+
+
-For example, lets say you have a column named `status` that reflects `approved` and `pending` values. You can set the color for these values using the following expression in the **Cell Background** property:
+
+### Basic
+
+#### Text
+
+
+
+This property specifies the label for the column type. For instance, when the column type is set to Button, you can use this property to define the Button's label.
+
+
+
+#### Menu items source `string`
+
+
+
+This property allows you to specify the source of the menu items.
+
+Options:
+
+- **Static:** When the Static option is selected, the **Menu Items** property becomes visible, enabling you to add and manage the menu items directly from the UI. Click the ⚙️ gear icon to access the configuration options. For more information, see [Menu Items](/reference/widgets/menu/menu-items).
+
+- **Dynamic:** With the Dynamic source, menu items are populated by binding a query to the **Source data**. To configure the properties of the menu items, click the **Configure Menu Item** button. The menu items do not display until configured using the `currentItem` or `currentIndex` property.
+
+
+
+#### Source data `array`
+
+
+
+This property is used to provide the data for dynamic menus. It accepts an array of values that can be defined statically or derived from any query.
+
+*Example*:
```js
-{{currentRow.status === "approved" ? "#22c55e" : "#facc15"}}
+{{[
+ { "label": "Admin", "value": "admin" },
+ { "label": "Editor", "value": "editor" },
+ { "label": "Viewer", "value": "viewer" }
+]}}
```
-If you want to keep the same background color for an entire row, you can use the same custom style expression in each column **Cell Background** property.
-
+Once you have configured the **Source Data**, you need to configure the **Menu items** to display the data. You can reference the menu item using `{{currentItem.label}}` to dynamically populate the menu based on the specified values.
+
+
+
+
+
+
+
+#### Configure menu items `string`
+
+
+
+
+This property allows you to configure the menu items defined in the **Source Data** property. When you click on the **Configure** button, you can update the styles and label properties.
+
+To display the menu items, you need to set the label property using either [currentItem](/reference/widgets/menu/menu-items#currentitem-object) or [currentIndex](/reference/widgets/menu/menu-items#currentindex-number) to reference the corresponding values.
+
+*Example:*
+
+```js
+{{currentItem.label}}
+```
+
+
+
+
+
+
+
+
+
+
+#### Icon
+
+
+
+This property specifies the icon displayed on the button. You can also use JavaScript to dynamically set the icon. Appsmith uses icons from the [Blueprintjs](https://blueprintjs.com/docs/#icons) library.
+
+
+
+
+### General
+
+#### Visible `boolean`
+
+
+This property controls the visibility of the column. If set to false, the entire column is hidden from view in the Table.
+
+
-## Editable
+#### Cell Wrapping `boolean`
-When enabled, this property allows users to modify a field or cell. You can then use the Column's **onSubmit** or **onClick** event to run a query to update the data.
+
+
+This property allows the content of the cell to be wrapped, enabling the display of longer text within the cell without overflowing.
+
+
-Additionally, you can use JavaScript by clicking on *JS* next to the **Editable** property to control it conditionally. If you are using JS, make sure to enable the **Editable checkbox** at the Table column level before adding your code.
+#### Editable `boolean`
-*Example*: if you want to allow only certain users to edit the Table:
+You can enable the **Editable** property by selecting the option in the individual column settings of the Table. By enabling inline editing and marking specific columns as Editable, users can update data directly from the UI by double-clicking on the desired cell.
-* Enable the Editable property at the Table Column level.
+Additionally, you can control this property conditionally by clicking on JS next to the Editable option. For more information on all the editable properties, including validation, settings, and related events, see [Inline Editing](/reference/widgets/table/editable).
-* Open the column settings, click *JS* for the **Editable** property, and add your code.
+*Example:* To allow only certain users to edit the Table, open the column settings, click JS next to the **Editable** property, and add your code:
```javascript
{{appsmith.user.email === 'john@appsmith.com' ? true : false}}
```
-This code checks if the email of the logged-in user is `john@appsmith.com`. If it is, the property is set to true, making the column editable. If it is not, the property is set to false, keeping the column non-editable.
+This code checks if the email of the logged-in user is `john@appsmith.com`. If it is, the property is set to `true`, making the column editable. If it is not, the property is set to `false`, keeping the column non-editable.
+
+For more information on setting up queries to edit or add rows using inline editing, see [Edit Table Data Inline.](/reference/widgets/table/inline-editing).
-Learn more about [Inline editing](/reference/widgets/table/inline-editing).
@@ -90,77 +251,180 @@ Learn more about [Inline editing](/reference/widgets/table/inline-editing).
-## Properties
-
-These common properties allow you to edit the column, and customize the user actions.
-
-
-| Property | Data type | Description |
-|:------------------------------: |----------- |:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-| **Column type** | String | Sets the type of cell to use in this column. There are a variety of different types that have different behaviors, such as buttons, switches, and more. |
-| **Computed Value** | String | It allows you to manipulate the value using JS expressions. |
-| **Visible** | Boolean | Controls the column's visibility on the page. When turned off, the column won't be visible. |
-| **Disabled** | Boolean | It disables input to the column type. The column type remains visible to the user, but user input is not allowed. |
-| **Column Freeze** | Boolean | Controls whether to unfreeze or freeze the column to the left or right. |
-| **Editable** | Boolean | A property that determines whether the user can modify a field or cell. Learn more about [Inline editing](/reference/widgets/table/inline-editing). |
-| **Required** | Boolean | Makes input to the column type mandatory. |
-| **Cell Wrapping** | Boolean | Allow content of cell to be wrapped. |
-| **Text** | String | Sets the label of the column type. |
-| **Date Format** | String | The Date Format property specifies the date format of the incoming data specified in the Computed Value property. For example, if the incoming date is in the format `YYYY-MM-DD HH:mm` and the option selected in the Date Format property is `DD/MM/YYYY`, then it cannot parse the date and displays 'Invalid date' in the column. |
-| **Display Format** | String | The Display Format property specifies how the date information should be displayed to the user. For example, if the incoming date is in the format `YYYY-MM-DD` but the Display Format property is set to `DD/MM/YYYY`, the date information would be displayed to the user in the desired format of `DD/MM/YYYY`. |
-| **Icon** | String | Sets the icon to be used for the icon column type. |
-| **Menu Items Source** | String | Sets source for menu column type. |
-| **Menu Items** | List | Display list of menu items. |
-| **Source Data** | Array | This property is used to specify the data source for a dynamic menu. |
-| **Configure Menu Items** | Function | You define the styles for the menu items. |
-| **Add a New Menu Item** | Function | This button adds a new item to the menu. |
-| **Compact** | Boolean | This property decides if the column type is in compact mode. |
-| **Options** | Array | Options to be shown on the select dropdown. |
-| **Placeholder** | String | Sets the placeholder text within the input box. |
-| **Filterable** | Boolean | It makes the dropdown list filterable. |
-| **Reset filter text on close** | Boolean | Reset the filter text when the dropdown is closed. |
-| **Server Side Filtering** | Boolean | Enables Server Side Filtering of the data. |
-| **Display Text** | String | The text to be displayed in the column.
-
-
-## Column types
-
-This property allows you to select the type of cell to use in the column. Currently, the following column types are available:
-
-
-| Column type | Description |
-|-------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **Button** | The button column type is a cell that can be clicked by the user, which triggers an `onClick` event and the `triggeredRow` reference property retrieves the data of the corresponding row. |
-| **Checkbox** | The checkbox column type denotes a binary value, with the checked and unchecked states represented by True and False, respectively. This column type can be made [editable]( /reference/widgets/table/inline-editing) by enabling the Editable property in the column settings. |
-| **Icon Button** | The Icon button column type is a clickable button with an icon instead of text. It triggers an `onClick` event and the `triggeredRow` reference property retrieves the data of the corresponding row. |
-| **Image** | The image column type displays an image by interpreting the cell value as an image source `URL` or `base64` data. It shows `Invalid Image` if the data is not valid. |
-| **Menu Button** | The menu button column type is a group of buttons that can be expanded into a menu. Menu items can be added dynamically using the Menu Items Source as Dynamic and the `{{currentRow}}` referencing inside the Source Data property. However, for configuring the menu items, only the `{{currentItem}}` and `{{currentIndex}}` can be used. |
-| **Number** | The number column type is used for numeric data and supports [inline editing](/reference/widgets/table/inline-editing). It can be made editable by enabling the Editable property in the column settings. |
-| **Plain Text** | The plain text column type represents data with readable characters and supports [inline editing](/reference/widgets/table/inline-editing). It can be made editable by enabling the Editable property in the column settings. |
-| **Switch** | The Switch column type allows users to toggle a single item on or off, using binary values. It supports [inline editing](/reference/widgets/table/inline-editing) and can be made editable by enabling the Editable property in the column settings. |
-| **URL** | The URL column type interprets the cell value as a hyperlink, allowing users to click on the cell and open the corresponding URL in a new browser tab. It requires including the domain and suffix of the URL, such as `example.com`. |
-| **Video** | With the video column type, you can display videos within a table. To add a video to a cell, simply provide a source file path or URL from platforms such as YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, or DailyMotion as the cell value. |
-| **Date** | The Date column type allows you to set up custom formatting options for date and time information. You can format and display the date using the Date Format and Display Format properties. It supports [inline editing](/reference/widgets/table/inline-editing). |
-| **Select** | The Select column type allows users to select an option from a predefined list of choices. The Options property should be an array of objects, with each object containing a `label` and a `value` property, `[{ "label": "ABC", "value": "abc"}]` . The select column type can only be displayed or edited when the [Editable](/reference/widgets/table/inline-editing) property is enabled in the column settings. |
-
-
-## Style properties
-
-Style properties allow you to change the look and feel of the column type.
-
-| **Property** | **Data Type** | **Description** |
-|--------------------------|---------------|--------------------------------------------------------|
-| **Text Size** | String | Sets the size of the text in the column. |
-| **Emphasis** | String | Toggles bold or italic emphasis on the text. |
-| **Text Align** | String | Sets the horizontal alignment of the text. |
-| **Border Radius** | String | Allows you to define curved corners. |
-| **Box Shadow** | String | Applies a shadow effect to the cells in the column. |
-| **Button Variant** | String | Sets the visual style for buttons in the column. |
-| **Button Color** | String | Sets the background color for buttons in the column. |
-| **Cell Background** | String | Sets the background color for the cells in the column. |
-| **Horizontal Alignment** | String | Sets the horizontal alignment of content within cells. |
-| **Vertical Alignment** | String | Sets the vertical alignment of content within cells. |
-| **Text Color** | String | Sets the color for the text in the column. |
-| **Image Size** | Options | Allows you to resize an image for Image column type. |
-| **Position** | Options | Sets the position of the cell. |
-| **Icon** | String | Displays an icon within the cell. |
\ No newline at end of file
+#### Column Freeze `boolean`
+
+
+
+This property allows you to freeze or unfreeze a column, keeping it fixed to the left or right of the Table as users scroll horizontally.
+
+
+
+#### Disabled `boolean`
+
+
+
+This property disables user input for the column. While the column remains visible, users will not be able to interact or make changes to it.
+
+
+
+
+### Select properties
+
+These properties become available only when the column type is set to Select. They enable you to customize the behavior and appearance of the select column
+
+
+#### Options `array`
+
+
+
+This property defines the options to be displayed in the select dropdown. It should be provided as an array of objects, where each object contains a `label` and a `value`.
+
+*Example:* If you want to create a gender selection dropdown, you could define the options as follows:
+
+
+
+```js
+{{[
+ {"label": "Male", "value": "male"},
+ {"label": "Female", "value": "female"}
+]}}
+```
+
+
+
+
+
+#### Placeholder `string`
+
+
+
+The placeholder is instructional text shown in an input field when it is empty. It indicates what type of information is expected, helping users understand how to fill out the field.
+
+
+
+#### Filterable `boolean`
+
+
+
+This property allows you to add a search bar to the dropdown list, enabling users to quickly find options by typing in the input field. This setting is only available when the column type is set to Select.
+
+
+
+#### Reset filter text on close `boolean`
+
+
+
+When enabled, this property clears any text typed in the dropdown's search bar when the dropdown closes. This ensures the input field is empty for future searches when the dropdown is reopened.
+
+
+
+#### Server Side Filtering `boolean`
+
+
+
+This property enables server-side filtering of the dropdown data. When set to `true`, the application sends filter queries to the server based on user input, retrieving only the relevant options. This is beneficial for large datasets, improving performance and reducing loading times by fetching only necessary items as users type.
+
+
+
+## Style
+
+Style properties let you customize the appearance of each column, including text alignment, colors, and fonts.
+
+### Text formatting
+
+#### Text size `string`
+
+
+
+Specifies the size of the text in the column. Options include Small (S), Medium (M), Large (L), and Extra Large (XL).
+
+
+
+#### Emphasis `string`
+
+
+
+Specifies the text styling options for the column. You can choose from **Bold**, **Italic**, and **Underline**, and select multiple options if needed to apply different styles.
+
+
+
+#### Text/Horizontal alignment `string`
+
+
+
+Controls the horizontal alignment of text/button within the column. Options include **Left**, **Center**, and **Right** alignment.
+
+
+
+#### Vertical alignment `string`
+
+
+
+Sets the vertical alignment of the text/button within the column. Options include **Top**, **Middle**, and **Bottom** alignment.
+
+
+
+#### Border Radius
+
+ Allows you to apply rounded corners to cells within the column.
+
+
+ #### Box Shadow
+
+ Adds a shadow effect to the cells in the column, giving them a raised appearance.
+
+
+ #### Button Variant
+
+ Specifies the visual style for buttons in the column, such as primary, secondary, or custom styles.
+
+
+ #### Button Color
+
+ Sets the background color of buttons within the column.
+
+
+ #### Cell Background (Column Color)
+
+
+You can style each column type from the style property pane, including options to change column color. However, if you need more advanced customization, such as changing Table color/column color, you can use the `currentRow` and `currentIndex` references to create custom color expressions. These expressions enable you to conditionally change color and style of individual cells based on their content, offering more flexibility than simply applying a static style to an entire column.
+
+*Example:* You have a column named `status` that reflects `approved` and `pending` values. You can set the color for these values using the following expression in the **Cell Background** property:
+
+```js
+{{currentRow.status === "approved" ? "#22c55e" : "#facc15"}}
+```
+If you want to keep the same background color for an entire row, you can use the same custom style expression in each column **Cell Background** property.
+
+
+
+
+
+
+
+ #### Text Color
+
+
+
+This property allows you to define the color of the text displayed in the column. By customizing text color, you can improve readability and emphasize important information for users.
+
+*Example:* To display the status of a project with different colors, you can use the following code:
+
+```js
+{{ currentRow.status === "completed" ? "#28a745" : currentRow.status === "in-progress" ? "#ffc107" : "#dc3545" }}
+```
+
+
+
+ #### Image Size
+
+
+
+This property adjusts the size of images within an Image column type. You can choose from predefined sizes such as Small, Medium, or Large, ensuring that the images fit well within the layout of the Table without disrupting the overall design.
+
+
+
+
+
+
+
diff --git a/website/docs/reference/widgets/table/editable.md b/website/docs/reference/widgets/table/editable.md
new file mode 100644
index 0000000000..2b2153de0f
--- /dev/null
+++ b/website/docs/reference/widgets/table/editable.md
@@ -0,0 +1,234 @@
+# Inline Editing
+
+This page provides information related to all the editable column properties. You can enable the **Editable** property either by selecting the checkbox in the Table's column property settings or directly from the individual column settings. By enabling inline editing, users can update data directly from the UI by double-clicking on the desired cell
+
+For more details on how to configure queries to edit or add rows using inline editing, see [Edit Table Data Inline](/reference/widgets/table/inline-editing).
+
+
+
+
+
+
+
+
+## Properties
+
+These common properties allow you to edit the column, and customize the user actions.
+
+
+
+### Validation
+
+These properties help ensure user input follows specific rules to maintain data accuracy.
+
+#### Regex `string`
+
+
+
+The Regex property allows you to set custom validation for user input by specifying a regular expression pattern. If the input does not match this pattern, an error message is displayed.
+
+*Examples:*
+
+**Email Validation:** To validate whether an entered email is correct, use the following regular expression code inside the **Regex** property:
+
+```JS
+^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$
+```
+
+**Phone number validation:** If you want to validate international phone numbers starting with a plus sign (+) and a total length between 6 and 14 digits, use the following code inside the **Regex** property:
+
+```js
+^\+(?:[0-9]●?){6,14}[0-9]$
+```
+
+**Number validation:** If you need to add number validation for fields like currency or prices, you can use the following regular expression code inside the **Regex** property:
+
+```js
+//Regex
+
+//Range Validation - 0 to 100:
+^(0*100(\.0*)?)$|^([1-9]?[0-9](\.\d*)?)$
+
+//Positive Number Validation:
+^[1-9][0-9]*$
+
+//Decimal Number Validation:
+^-?\d+(\.\d{2})?$
+
+//Minimum and Maximum Value Validation(1000 and 10,000):
+Regex: ^(10000|[1-9][0-9]{3,4})$
+```
+
+
+
+
+#### Required `boolean`
+
+
+
+Indicates whether the input for this column is mandatory. If set to `true`, users must provide a value before saving the column.
+
+
+
+#### Valid `boolean`
+
+
+
+This property allows you to define custom validation rules and error messages to guide users when their input does not meet the required criteria. To access the user's edited values, you can use the following reference properties:
+
+- **editedValue**: This property shows the current value being edited in the column. It reflects what the user is typing or modifying in that specific cell.
+
+
+
+*Example:* To validate that the input is longer than 2 characters, you can use:
+
+```js
+{{ editedValue.length > 2 }}
+```
+
+
+
+
+- **currentRow**: This property holds the original, unedited values of the current row.
+
+
+
+- *Editing Existing Rows:* When editing, the `currentRow` property shows the row’s original values and does not update dynamically. It reflects changes only after the Save button is clicked.
+
+- *Adding New Rows:* When adding a new row, the `currentRow` property represents the new row object.
+
+*Example*: If you are editing a `discount` field in a Table, you might want to ensure that the discount percentage does not exceed the product's original price. To do this, compare the edited discount value with the price from the current row, as shown below:
+
+```js
+{{ editedValue <= currentRow.price }}
+```
+
+
+
+- **currentIndex**: This property indicates the index of the row being edited or added.
+
+
+
+- *Editing Existing Rows:* For rows that already exist in the dataset, `currentIndex` reflects the actual index of the row being edited.
+
+- *Adding New Rows:* When adding a new row, `currentIndex` is set to `-1`, indicating that the new row does not yet exist in the dataset.
+
+```js
+{{ currentIndex >= 0 }}
+```
+
+
+
+- **isNewRow**: The `isNewRow` property indicates if a new row is being added. It is `true` for new rows, allowing you to apply specific logic for new entries. For existing rows, it is `false`.
+
+
+
+```js
+{{ isNewRow }}
+```
+
+
+
+
+
+
+
+
+
+#### Min `number`
+
+
+
+This property ensures that any value entered must be greater than or equal to the specified minimum. It is only available when the column type is set to **Number**, **Currency**, or **Date**.
+
+
+
+#### Max `number`
+
+
+
+This property ensures that any value entered must be less than or equal to the specified maximum. It is only available when the column type is set to **Number**, **Currency**, or **Date**.
+
+
+
+
+#### Error Message `string`
+
+
+
+This property allows customization of the error message displayed when the user enters an incorrect value. By default, the input widget shows a generic `invalid input` message.
+
+
+
+
+
+### Date settings
+
+These editable properties become available only when the column type is set to Date.
+
+
+#### First day of the week `number`
+
+
+
+This property defines the starting day of the week in a Date field's calendar. For instance, setting it to `0` begins the week on Sunday, while `1` starts it on Monday. This setting can be adjusted according to regional or organizational preferences.
+
+
+
+
+#### Show shortcuts `boolean`
+
+
+
+When enabled, it adds section within the Datepicker pop-up that contains options - **Today, 1 week ago, 1 month ago, 3 months ago, 1 year ago**, for quick date selection.
+
+
+
+
+## Events
+
+When the event is triggered, these event handlers can execute queries, JS functions, or other [supported actions](/reference/appsmith-framework/widget-actions). These events may be available only for specific column types or when certain properties are enabled.
+
+#### onSubmit
+
+
+
+Allows you to configure one or multiple actions (Framework functions, queries, or JS functions) to be executed when the **Save** button of any input column type is clicked. This includes various column types such as Number, Plain Text, and more.
+
+
+
+#### onOptionChange
+
+
+
+Allows you to configure one or multiple actions (Framework functions, queries, or JS functions) to be executed when the user selects an option in the dropdown list. It enables you to capture the user's input and perform specific actions in response.
+
+
+
+#### onFilterUpdate
+
+
+
+This event allows you to configure one or multiple actions (Framework functions, queries, or JS functions) to be executed when you update the filter text. You can also write custom JavaScript logic for this event by clicking on the JS next to the property.
+
+
+
+#### onChange
+
+
+
+This event allows you to configure one or multiple actions to be executed in response to changes in the **Switch** state.
+
+
+
+#### onDateSelected
+
+
+
+This event allows you to configure one or multiple actions to be executed when a date is selected from the date column type.
+
+
\ No newline at end of file
diff --git a/website/sidebars.js b/website/sidebars.js
index 659ccc75d4..250a8897a3 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -532,7 +532,8 @@ const sidebars = {
label: 'Table',
link: { type: 'doc', id: 'reference/widgets/table/README' },
items: [
- 'reference/widgets/table/column-settings'
+ 'reference/widgets/table/column-settings',
+ 'reference/widgets/table/editable'
],
},
'reference/widgets/text',
diff --git a/website/static/img/menu-item-column.png b/website/static/img/menu-item-column.png
new file mode 100644
index 0000000000..6a08c472ee
Binary files /dev/null and b/website/static/img/menu-item-column.png differ
diff --git a/website/static/img/new-edit-inline.gif b/website/static/img/new-edit-inline.gif
new file mode 100644
index 0000000000..060810edcd
Binary files /dev/null and b/website/static/img/new-edit-inline.gif differ
diff --git a/website/static/img/new-editable.png b/website/static/img/new-editable.png
new file mode 100644
index 0000000000..e55328275d
Binary files /dev/null and b/website/static/img/new-editable.png differ