View, explore, and edit large amounts of data in a familiar spreadsheet interface with the Data Grid component for OutSystems Reactive Web apps.
The goal for the OutSystems Data Grid component is to help you develop applications that need data visualization and manipulation features that are not currently covered by other components.
Use the OutSystems Data Grid to create enterprise-grade interfaces that are more suitable and time-effective than designing a custom solution every time you need to manipulate dense datasets.
- Built for Reactive Web apps
- Data selection and editing in a familiar interface
- Data sorting by parameter
- Data grouping
- Virtual Scrolling
Please check the tutorial OutSystems Data Grid in less than 4 minutes.
The OutSystems component, like all components, can be found in OutSystems forge. There you can also find a sample application that show-cases several uses of the component, that is also [the documentation].
If you're using OutSystems, this is how you can use this component in your application:
This repository contains the code that enable the usage of an external provider (Wijmo), to create grids in OutSystems applications with the least possible effort. The code is written in TypeScript🖤, and you branch it and PR your changes/proposals!
We highly recommend the usage of the following tools:
- Visual Studio Code
- With these extensions:
- Document This
- ESLint
- Prettier - Code formatter
- Create a branch based in the branch master (lastest & greatest release)
- Open your Visual Studio Code in your branch
- Run the following command in Visual Studio Code terminal:
npm run setup
(this will install all the dependencies that you need and compile the code) - Do your magic! :)
- Document your code (with the extension "Document This", start typing
/**
and the extension will give you a good starting point - Compile and fix errors and warnings (in Visual Studio Code terminal:
npm run build
) - Check if the code format is following our conventions (in Visual Studio Code terminal:
npm run lint
) 7.1 Some of the conventions can be fixed automatically by lint (in Visual Studio Code terminal:npm run lintfix
) 7.2 Although the script above execute the prettier conventions, you may want to run it over all project files (in Visual Studio Code terminal:npm run prettier
) - Fix all errors & warnings! :)
- Create a PR, describing what was the (mis)behavior, what you changed and please provide a sample
- A new branch from master should be created.
- If possible the branch should be kept updated with the master branch.
- If possible unnecessary commit messages should be omitted.
After completing your changes, and testing, please proceed with submitting a Pull Request.
To be accepted, a Pull Request needs to:
-
Fulfill the following requirements
- Needs to compile without errors
- Needs to follow the code style rules (without warnings and errors)
- Needs to be approved by 2 team members (owners of the repo)
- The Pull Request template, should be filled up by the Pull Requestor:
- Provide a short description
- A link to a sample page showing the fixed behavior or the new feature
- What was happening?
- What was done?
- Tests steps
- Screenshots
- Checklist
-
Follow best practices
- The submitted code should be well documented (e.g. comments).
- Avoid changes outside the scope of the issue in hands.
- Avoid exposing sensible information of any kind (e.g. internal server link, process, etc).
- Download latest version in OutSystems forge
- Test the latest changes in the sample app
- Component living documentation
- Tutorial OutSystems Data Grid in less than 4 minutes
Write us in the component support page!