DataSourceComponent

DataSourceComponent constant

DataSourceComponent: ConnectedComponent<typeofDataSourceComponentInnerOmit<ClassAttributes<DataSourceComponentInner> & DataSourceComponentProps & DataSourceComponentStateProps"appMode" | "dataSource" | "dataSourceInfo" | "dataSourceJson" | "dataSourceSchema" | "rootDataSourceJson" | "dataSourceManager" | "belongToDataSourceInfo" | "belongToBelongToDataSourceInfo"> & DataSourceComponentProps & ConnectProps> = ...

A react component that makes data source easy to use. It helps widgets to create data source instance, load records and listen changes of data source. In most cases, you can pass in useDataSource and query, and render the query result by using a render function as a child component. The query result records are put into data source records property (Internally, it calls load() method).

Use dark colors for code blocksCopy
 
1
<DataSourceComponent useDataSource={props.useDataSources[0]} onDataSourceCreated={handleDataSourceCreated} onCreateDataSourceFailed={handleDataSourceFailed} onDataSourceInfoChange={handleDataSourceChange} />
Use dark colors for code blocksCopy
        
1
2
3
4
5
6
7
8
const renderData = (ds: DataSource, info: IMDataSourceInfo) => {
 return <div>
 {
   ds && ds.getRecords().map(r => <div>{r.getId()}</div>)
 }
 </div>
}
<DataSourceComponent widgetId={props.id} query={{ where: '1=1' }} useDataSource={props.useDataSources[0]}>{renderData}</DataSourceComponent>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.