import React , { useContext , useCallback } from 'react' ; import { observer } from 'mobx-react' ; import { Table } from '@baidu/one-ui' ; import { DataAnalyzeStoreContext } from '../../../../stores' ; const TableQueryResult = observer ( ( ) => { const dataAnalyzeStore = useContext ( DataAnalyzeStoreContext ) ; const columnConfigs = dataAnalyzeStore . originalGraphData . data . table_view . header . map ( ( title ) => ( { title , dataIndex : title , render ( text ) { if ( title === 'path' ) { return < PathItem items = { text } />; } return JSON . stringify ( text ) ; } } ) ) ; const handlePageChange = useCallback ( ( e ) => { dataAnalyzeStore . mutatePageNumber ( 'tableResult' , Number ( e . target . value ) ) ; } , [ dataAnalyzeStore ] ) ; return ( < div style = { { position : 'absolute' , top : 0 , left : 0 , padding : 8 , width : '100%' } } > < Table columns = { columnConfigs } dataSource = { dataAnalyzeStore . originalGraphData . data . table_view . rows } pagination = { { size : 'medium' , pageSize : 10 , hideOnSinglePage : true , showSizeChange : false , showPageJumper : false , total : dataAnalyzeStore . pageConfigs . tableResult . pageTotal , pageNo : dataAnalyzeStore . pageConfigs . tableResult . pageNumber , onPageNoChange : handlePageChange } } /> < /div>); } ) ; const PathItem = observer ( ( { items } ) => ( < > { items . map ( ( item ) => ( < span className = "query-result-content-table-path-item" > { JSON . stringify ( item ) } < /span>))} < />)); export default TableQueryResult ;