RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/jQuery/Demos/WidgetsGallery/Demo/DataGrid/RealTimeUpdates below:

Real-Time Updates - React Data Grid

import React, { useEffect, useState } from 'react'; import DataGrid, { Column, Summary, TotalItem, MasterDetail, Paging, type DataGridTypes, } from 'devextreme-react/data-grid'; import { Slider, type SliderTypes, Tooltip } from 'devextreme-react/slider'; import { DataSource } from 'devextreme-react/common/data'; import { productsStore, ordersStore, getOrderCount, addOrder, Product, } from './data.ts'; const dataSource = new DataSource({ store: productsStore, reshapeOnPush: true, }); const getDetailGridDataSource = (product: Product) => ({ store: ordersStore, reshapeOnPush: true, filter: ['ProductID', '=', product.ProductID], }); const getAmount = (order) => order.UnitPrice * order.Quantity; const detailRender = (detail: DataGridTypes.MasterDetailTemplateData) => ( <DataGrid dataSource={getDetailGridDataSource(detail.data)} repaintChangesOnly={true} columnAutoWidth={true} showBorders={true}> <Paging defaultPageSize={5} /> <Column dataField="OrderID" dataType="number" /> <Column dataField="ShipCity" dataType="string" /> <Column dataField="OrderDate" dataType="datetime" format="yyyy/MM/dd HH:mm:ss" /> <Column dataField="UnitPrice" dataType="number" format="currency" /> <Column dataField="Quantity" dataType="number" /> <Column caption="Amount" dataType="number" format="currency" allowSorting={true} calculateCellValue={getAmount} /> <Summary> <TotalItem column="OrderID" summaryType="count" /> <TotalItem column="Quantity" summaryType="sum" displayFormat="{0}" /> <TotalItem column="Amount" summaryType="sum" displayFormat="{0}" valueFormat="currency" /> </Summary> </DataGrid> ); const App = () => { const [updateFrequency, setUpdateFrequency] = useState(100); useEffect(() => { const interval = setInterval(() => { if (getOrderCount() > 500000) { return; } for (let i = 0; i < updateFrequency / 20; i += 1) { addOrder(); } }, 50); return () => clearInterval(interval); }, [updateFrequency]); const onUpdateFrequencyChanged = (e: SliderTypes.ValueChangedEvent) => { setUpdateFrequency(e.value); }; return ( <div> <DataGrid dataSource={dataSource} repaintChangesOnly={true} columnAutoWidth={true} showBorders={true}> <Paging defaultPageSize={10} /> <Column dataField="ProductName" dataType="string" /> <Column dataField="UnitPrice" dataType="number" format="currency" /> <Column dataField="OrderCount" dataType="number" /> <Column dataField="Quantity" dataType="number" /> <Column dataField="Amount" dataType="number" format="currency" /> <Summary> <TotalItem column="ProductName" summaryType="count" /> <TotalItem column="Amount" summaryType="sum" displayFormat="{0}" valueFormat="currency" /> <TotalItem column="OrderCount" summaryType="sum" displayFormat="{0}" /> </Summary> <MasterDetail enabled={true} render={detailRender}> </MasterDetail> </DataGrid> <div className="options"> <div className="caption">Options</div> <div className="option"> <span>Update frequency:</span> <Slider min={10} step={10} max={5000} value={updateFrequency} onValueChanged={onUpdateFrequencyChanged}> <Tooltip enabled={true} format="#0 per second" showMode="always" position="top"> </Tooltip> </Slider> </div> </div> </div> ); }; export default App;

import React, { useEffect, useState } from 'react'; import DataGrid, { Column, Summary, TotalItem, MasterDetail, Paging, } from 'devextreme-react/data-grid'; import { Slider, Tooltip } from 'devextreme-react/slider'; import { DataSource } from 'devextreme-react/common/data'; import { productsStore, ordersStore, getOrderCount, addOrder, } from './data.js'; const dataSource = new DataSource({ store: productsStore, reshapeOnPush: true, }); const getDetailGridDataSource = (product) => ({ store: ordersStore, reshapeOnPush: true, filter: ['ProductID', '=', product.ProductID], }); const getAmount = (order) => order.UnitPrice * order.Quantity; const detailRender = (detail) => ( <DataGrid dataSource={getDetailGridDataSource(detail.data)} repaintChangesOnly={true} columnAutoWidth={true} showBorders={true} > <Paging defaultPageSize={5} /> <Column dataField="OrderID" dataType="number" /> <Column dataField="ShipCity" dataType="string" /> <Column dataField="OrderDate" dataType="datetime" format="yyyy/MM/dd HH:mm:ss" /> <Column dataField="UnitPrice" dataType="number" format="currency" /> <Column dataField="Quantity" dataType="number" /> <Column caption="Amount" dataType="number" format="currency" allowSorting={true} calculateCellValue={getAmount} /> <Summary> <TotalItem column="OrderID" summaryType="count" /> <TotalItem column="Quantity" summaryType="sum" displayFormat="{0}" /> <TotalItem column="Amount" summaryType="sum" displayFormat="{0}" valueFormat="currency" /> </Summary> </DataGrid> ); const App = () => { const [updateFrequency, setUpdateFrequency] = useState(100); useEffect(() => { const interval = setInterval(() => { if (getOrderCount() > 500000) { return; } for (let i = 0; i < updateFrequency / 20; i += 1) { addOrder(); } }, 50); return () => clearInterval(interval); }, [updateFrequency]); const onUpdateFrequencyChanged = (e) => { setUpdateFrequency(e.value); }; return ( <div> <DataGrid dataSource={dataSource} repaintChangesOnly={true} columnAutoWidth={true} showBorders={true} > <Paging defaultPageSize={10} /> <Column dataField="ProductName" dataType="string" /> <Column dataField="UnitPrice" dataType="number" format="currency" /> <Column dataField="OrderCount" dataType="number" /> <Column dataField="Quantity" dataType="number" /> <Column dataField="Amount" dataType="number" format="currency" /> <Summary> <TotalItem column="ProductName" summaryType="count" /> <TotalItem column="Amount" summaryType="sum" displayFormat="{0}" valueFormat="currency" /> <TotalItem column="OrderCount" summaryType="sum" displayFormat="{0}" /> </Summary> <MasterDetail enabled={true} render={detailRender} ></MasterDetail> </DataGrid> <div className="options"> <div className="caption">Options</div> <div className="option"> <span>Update frequency:</span> <Slider min={10} step={10} max={5000} value={updateFrequency} onValueChanged={onUpdateFrequencyChanged} > <Tooltip enabled={true} format="#0 per second" showMode="always" position="top" ></Tooltip> </Slider> </div> </div> </div> ); }; export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import ArrayStore from 'devextreme/data/array_store'; const cities = ['Los Angeles', 'Denver', 'Bentonville', 'Atlanta', 'Reno', 'Beaver', 'Malibu', 'Phoenix', 'San Diego', 'Little Rock', 'Pasadena', 'Boise', 'San Jose', 'Chatsworth', 'San Fernando', 'South Pasadena', 'San Fernando Valley', 'La Canada', 'St. Louis']; const orders = []; export interface Product { ProductID: number; ProductName: string; UnitPrice: number; Quantity: number; Amount: number; OrderCount: number; } const products: Product[] = []; for (let i = 1; i <= 100; i += 1) { products.push({ ProductID: i, ProductName: `Product ${i}`, UnitPrice: Math.floor(Math.random() * 1000) + 1, Quantity: 0, Amount: 0, OrderCount: 0, }); } export const productsStore = new ArrayStore({ key: 'ProductID', data: products, }); export const ordersStore = new ArrayStore({ key: 'OrderID', data: orders, }); export function getOrderCount() { return orders.length; } export function addOrder() { const product = products[Math.round(Math.random() * 99)]; const order = { OrderID: orders.length ? orders[orders.length - 1].OrderID + 1 : 20001, ShipCity: cities[Math.round(Math.random() * (cities.length - 1))], ProductID: product.ProductID, UnitPrice: product.UnitPrice, OrderDate: new Date(), Quantity: Math.round(Math.random() * 20) + 1, }; ordersStore.push([{ type: 'insert', data: order }]); productsStore.push([{ type: 'update', key: order.ProductID, data: { OrderCount: product.OrderCount + 1, Quantity: product.Quantity + order.Quantity, Amount: product.Amount + order.UnitPrice * order.Quantity, }, }]); }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

import ArrayStore from 'devextreme/data/array_store'; const cities = [ 'Los Angeles', 'Denver', 'Bentonville', 'Atlanta', 'Reno', 'Beaver', 'Malibu', 'Phoenix', 'San Diego', 'Little Rock', 'Pasadena', 'Boise', 'San Jose', 'Chatsworth', 'San Fernando', 'South Pasadena', 'San Fernando Valley', 'La Canada', 'St. Louis', ]; const orders = []; const products = []; for (let i = 1; i <= 100; i += 1) { products.push({ ProductID: i, ProductName: `Product ${i}`, UnitPrice: Math.floor(Math.random() * 1000) + 1, Quantity: 0, Amount: 0, OrderCount: 0, }); } export const productsStore = new ArrayStore({ key: 'ProductID', data: products, }); export const ordersStore = new ArrayStore({ key: 'OrderID', data: orders, }); export function getOrderCount() { return orders.length; } export function addOrder() { const product = products[Math.round(Math.random() * 99)]; const order = { OrderID: orders.length ? orders[orders.length - 1].OrderID + 1 : 20001, ShipCity: cities[Math.round(Math.random() * (cities.length - 1))], ProductID: product.ProductID, UnitPrice: product.UnitPrice, OrderDate: new Date(), Quantity: Math.round(Math.random() * 20) + 1, }; ordersStore.push([{ type: 'insert', data: order }]); productsStore.push([ { type: 'update', key: order.ProductID, data: { OrderCount: product.OrderCount + 1, Quantity: product.Quantity + order.Quantity, Amount: product.Amount + order.UnitPrice * order.Quantity, }, }, ]); }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

.options { padding: 20px; margin-top: 20px; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; display: flex; align-items: center; } .option > span { position: relative; top: 2px; margin-right: 10px; } .option > .dx-widget { width: 500px; display: inline-block; vertical-align: middle; }

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4