Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zzdjk6/devextreme-playground-demo
https://github.com/zzdjk6/devextreme-playground-demo
Last synced: 8 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/zzdjk6/devextreme-playground-demo
- Owner: zzdjk6
- Created: 2021-09-05T11:37:39.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-09-25T13:02:45.000Z (over 3 years ago)
- Last Synced: 2024-11-11T18:45:45.627Z (2 months ago)
- Language: TypeScript
- Size: 201 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Demo app
This is a demo app as a playground to try DevExtreme-Reactive.
## Motivation
The main idea is to build something tiny based on Material-UI and using `DataGrid`, `Scheduler` and `Chart` from the library.
## What I have tried
### DataGrid
- Controlled data state
- Edit / create data using external components
- Self-made action column
- Selection and bulk action
- Sorting
- Details view
- Virtual scroll
- Column sizing
- Custom filter component
- Custom table cell
- TypeScript support
- Material-UI theming
### Scheduler
- Controlled data state
- Manage view type using external components
- Customize toolbar
- Customize calendar appearance
- Editing data using custom dialog form
- Drag and drop editing
### Chart
- Basic bar chart and pie chart
- Tooltip
- Title and legend
## What I plan to try next
// TODO
## My current evaluation
### The pros
- easy to learn (document and demos are very good)
- consistent API styles (plugin based)
- flexible to customize in React way
- states can be fully controlled outside the component (blend well with other parts)
- use Mui as the render engine
- not hard to find answers online (the staff will usually provide runnable demo on codesandbox)
### The cons
- plugins rely on order to work properly
- needs to import things from different places (e.g., `@devexpress/dx-react-grid-material-ui` vs. `@devexpress/dx-react-grid` )
## Possible replacement for Data Grid
### Material-UI's Data Table
url: https://material-ui.com/components/tables/
Open source, many features are not available.
DevExtreme-Reactive is built based on this.
### x-grid
- url 1: https://material-ui.com/store/items/material-ui-pro/
- url 2: https://material-ui.com/components/data-grid/
Commercial, not finished yet.
### material-table
url: https://material-table.com/#/
Open source, has some advanced features but less than DevExtreme-Reactive
### mui-datatables
url: https://www.material-ui-datatables.com/
Open source, document is not good
### Other libraries
Most other data table libraries are either a wrapper of something non-React or not built with material-ui.
## Possible replacement for Scheduler
### FullCalendar
url: https://fullcalendar.io/
Commercial, not material-ui based
### react-big-calendar
url: https://github.com/jquense/react-big-calendar
Open source, not material-ui based
## Possible replacement for Chart
### React + d3.js libraries
- recharts, https://recharts.org/
- victory, https://formidable.com/open-source/victory/
- nivo, https://nivo.rocks/
Open source, React + d3.js
https://medium.com/react-courses/react-charts-built-on-d3-what-should-you-pick-rechart-visx-niv-react-vi-or-victory-adc64406caa1
### chart.js
url: https://www.chartjs.org/
Canvas-based.
### d3.js
Too low-level, should avoid if possible.
SVG-based.