In my application , table widget is using for list out the data from database. There is lot columns to show and thus table is too lengthy. Is there a way to customize the table UI or can we show single row split into two for reduce the table length and ease of visibility .
@Ginjo you can map over the data and return only the columns you need
{{ Query1.data.map((row) => {
return {
col1: row.col1Name
}
})
}}
You can use a list widget if you want to customise the look of each row
@Nikhil I need to display all columns like now and want to show each row values as two rows for ease of visibility . Is there any solution for this ? Thanks in advance .
@Ginjo I don’t think this is possible. Technically you can use JS to split the array of objects into chunks, but again that would not solve the issue. Also even if we try to split a row into two rows, how will the column headers be taken care of for the split part of the row?
We understand that scrolling horizontally on a table with large number of columns can be a pain. This experience will be made better with the following features
[Feature] Add sticky columns to the table widget · Issue #3265 · appsmithorg/appsmith · GitHub. - This will allow to freeze important columns so that browsing through the table data is easier
[Feature] Need an option to wrap text inside a table · Issue #5693 · appsmithorg/appsmith · GitHub - will allow you to reduce column width to show content that is wrapped inside cells thereby accommodating more columns on the screen
Today you can reorder and/or hide columns in the property pane so that important columns appear at first glance.
If you have any suggestions for UX improvements , please do share your thoughts 
2 Likes