Making the Table Grid control more interactive with new enhancements

Vishrut on July 13, 2022

Your CRUD interfaces – admin portals, GUIs, dashboards – are the backbone to any internal operation. And the display components like the Table Grid, Detail View, Charts are the primary interface for end users to visualize, process, and consume data to take action.

If you need to add a component to your app to display data in a tabular format and allow user to take action with it, without building it entirely from scratch – even the most popular libraries would require you to make some tweak and customize the table component to achieve the baseline CRUD functionality, formatting, and so on – not to mention any additional enhancement to make your app look more cohesive. 

We solve this pain point with the Table Grid control (check it here) 

Contrary to cells in a spreadsheet that support a handful of data types (like alphabets, numerical data), DronaHQ’s Table grid UI control provides a rich table functionality with many different data types––including files, contacts, and maps, to name a few. These enable users to add and view more detailed information. 

Users could view data from their data sources (Postgres, Mongo, Firebase, Google Sheets, etc., join data from one source to another (say joining customer ticket data from Zendesk with order data from MySQL) and work seamlessly with different data attributes within a single data table.

The table grid gives users the power to connect and work with all their data in one place and create simple applications.

 

 

DronaHQ’s Table Grid Control provides Rich table functionality

The Table Grid control has been our most used UI control on the DronaHQ platform. It is a staple to admin panels and CRUD interfaces being built for use cases across marketing, sales, HR, finance, admin, and many more.

One of the most powerful tabular UI components out there in the low code space, DronaHQ’s table grid comes pre-baked with CRUD functionalities like add, edit, delete. You can read about its features and capabilities here.

Today, we’re excited to roll out 3+ quality-of-life enhancements to the Table Grid – the immediate advantage being that you can build admin tools that are all the more interactive for the end users – all without writing any redundant code.

1. Hide/Show Columns

The end users can now hide or show columns based on their use case. 

Say in your product catalog app created for the sales force,  you have a whole list of SKU attributes displayed on the table however on the field, the sales rep only needs to see 4 – product name, SKU size, price, max discount in order to take the conversation up with customers – the salesperson can tweak which columns are visible on their end user portal without impacting the table on other end user portals.

2. Reorder Columns

The end user can reorder columns in the Table Grid control. 

Similar to our example above, say it is critical for the salesperson to see max discount column right next to the product in order to push discounted product to customers – they can do so on their end

The above two features were earlier available only for the app makers/admins designing the UI however, now the end user can also tweak the columns based on the details they need to see on their mobiles/web apps. 

These settings are persistent.

3. Add Events to Cell Click

App makers can now trigger an action flow on click of a cell. Say you’ve displayed customer data with attributes like email, phone number, account, linkedin url etc. You would like to send out an email, or make a call, or open their linkedin URL right upon clicking the respective attribute on the table. Earlier such actions were only possible on a row click. Adding events to cell-click drastically reduces the time needed to perform such actions from the front-end.

4. Edit cells in the Table itself (Coming up soon)

The typical end user is already familiar with how basic operations work on a spreadsheet, whether to view data or to add new information to a table. The table grid closely resembles the traditional spreadsheet with rows and columns. However, it takes it up a notch by providing a host of aforementioned features. So far the table grid sported pre-built CRUD operations that triggered a tray type screen to open up to allow the specific action to be executed (say Edit a record).

The table grid will soon enable end users to edit the data in the table itself without having to open up any additional modals or screens or pop ups. 

See how you can ensure your apps performance with the Table Grid control. https://community.dronahq.com/t/table-grid-control/190

Also see: Pagination Control, Conditional Lookup, 

This is just the beginning

While these are two brilliant updates that our customers are loving, we know the table grid is capable of supporting a lot more use cases and so it will keep on evolving. Soon you will be able to support (upcoming table grid feature).

This is an output of feedback from one of our customers, so keep your feedback coming!! 

Want a new UI control or think an existing one can use some enhancements? Join our Discord channel and drop us a message! 

Be sure to check out our growing library of UI controls here