The recently-released OutSystems' Data Grid component provides a rich way of displaying tabular data, with more functionality and flexibility than a standard Table Records widget. In this session, you'll see the Data Grid component in action, and learn how to use it for a variety of common scenarios.

1. | Introduction to the Data Grid
Introduction to the
Data Grid
G. Andrew Duthie - Senior Developer Advocate

2. | Introduction to the Data Grid| Introduction to the Data Grid
G. Andrew
Duthie
Senior Developer Advocate | OutSystems
@
in
andrew.duthie@outsystems.com
/devhammer

3. | Introduction to the Data Grid| Introduction to the Data Grid
Agenda

4. | Introduction to the Data Grid
● What is it?
● When to Use (and not)
● What’s Different?
● Built-in Features
● Demos

5. | Introduction to the Data Grid| Introduction to the Data Grid
What is the Data Grid?

6. | Introduction to the Data Grid
● Rich, Excel-like data interface
● Client-side rendering and interaction
● Bulk data editing
● Robust sorting, filtering, grouping
● More complex than a standard Table
Records widget
● No Scaffolding
● Data from REST, not Preparation
What is the Data Grid?

7. | Introduction to the Data Grid| Introduction to the Data Grid
When to Use? And not?

8. | Introduction to the Data Grid
● Use for:
■ Bulk data manipulation
■ Ability to access/edit any cell
■ Supporting rich validation,
conversion and rendering at the
cell level
● Not for:
■ Basic data display
■ Not optimized for Mobile
When to Use? And not?

9. | Introduction to the Data Grid| Introduction to the Data Grid
What’s Different?

10. | Introduction to the Data Grid
● Grid is mostly client-side
■ Data comes from REST
■ Better performance for many
operations
● Much more powerful, but also more
complex
■ Highly configurable via both CSS
and JavaScript functions
What’s Different?

11. | Introduction to the Data Grid| Introduction to the Data Grid
Built-in Features

12. | Introduction to the Data Grid
● No Configuration Required For:
■ Column Auto-generation
■ Paging
■ Sorting
■ Filtering
■ Grouping
■ Dynamic Showing/Hiding of
Columns
Built-in Features
● Also Supports:
■ Manual Column Creation
■ Many Column Types
■ Manual Grouping
■ Cell Editing
■ Row Insertion, Selection, and
Deletion
■ Dynamic Styling, Data
Conversion, and Validation via
JavaScript

13. | Introduction to the Data Grid| Introduction to the Data Grid
Demos

14. | Introduction to the Data Grid
● Demos
■ Simple Auto-generation
■ Adding Columns Manually
■ Displaying Images
■ Styling
■ Editing and Deleting Data

15. | NextStep Denver - Final walk-through
Stay for our NEO party
4:30pm - 6:30pm

16. | Introduction to the Data Grid
Thank You!
@ inspeaker@mail.com /speaker