Reactjs 可排序物料ui表

我尝试实现mui自定义表，使用可排序和排序解决方案，我对物料ui和react是新手。如何处理这个事件。我已经创建了这个方法，需要按方向枚举进行排序：“asc”，“desc”。在何处设置createSortHandler方法。建议最好的解决方案

const列=[
{
数据键：“deviceType”，
标签：'设备类型'，
}, {
数据键：“deviceID”，
标签：'Device ID'，
可排序：是的，
//cellRenderer:（{item，dataKey}）=>
//违约，
}, {
数据键：“名称”，
标签：“名称”，
可排序：是的，
},{
数据键：“当前版本”，
标签：“当前版本”，
可排序：是的，
},{
数据键：“位置”，
标签：'位置'，
可排序：是的，
},{
数据键：“状态”，
标签：“状态”，
可排序：是的，
},{
数据键：“lastAliveMessage”，
标签：“最后一条活动消息”，
可排序：是的，
}, {
数据键：“操作”，
标签：“行动”，
cellRenderer:（）=>，
}]
常数数据=[
{deviceType:'Tag'，deviceID:1，名称：'Tag For sending an'，位置：'Room_104'，状态：'assigned'}，
{deviceType:'Tag'，deviceID:1，名称：'Tag For sending an'，位置：'Room_104'，状态：'assigned'}，
{deviceType:'Tag'，deviceID:1，名称：'Tag For sending an'，位置：'Room_104'，状态：'assigned'}，
{deviceType:'Tag'，deviceID:1，名称：'Tag For sending an'，位置：'Room_104'，状态：'assigned'}，
{deviceType:'Tag'，deviceID:1，名称：'Tag For sending an'，位置：'Room_104'，状态：'assigned'}，
]
常量defaultCellRenderer=（{item，dataKey}）=>
项目[数据键]
const createSortHandler=property=>event=>{
this.props.onRequestSort（事件、属性）
};
常量表=（{data，columns，order，orderBy，className，children，…props}）=>
//log（columns.map（{dataKey，label}）=>dataKey））
//log（data.map（item=>columns.map（{dataKey，cellRenderer}）=>defaultCellRenderer（{item，dataKey}）））
{columns.map（{dataKey，label}）=>
{label}
)}
{data.map（项=>
{columns.map（{dataKey，cellRenderer}）=>
{（cellRenderer | | defaultCellRenderer）（{item，dataKey}）}
)}
)}
类增强表扩展组件{
状态={
订单：“asc”，
订购人：“卡路里”，
选定：[]，
搜索值：“”，
};
HandlerRequestSort=（事件、属性）=>{
const orderBy=属性
让order='desc'
if（this.state.orderBy==property&&this.state.order===desc'）{
订单='asc'
}
常量filterData=this.state.filterData.sort(
（a，b）=>order=='desc'？b[orderBy]>a[orderBy]：a[orderBy]>b[orderBy]，
)
this.setState（{filterData，order，orderBy}）
};
render（）{
const{order，orderBy，selected}=this.state
返回(
)
}
}

在

表中调用onRequestSort的位置
 const columns = [
        {
            dataKey: 'deviceType',
            label:'Device Type',
        }, {
            dataKey: 'deviceID',
            label:'Device ID',
            sortable: true,
            // cellRenderer: ({item, dataKey}) =>
            //          <Button >Default</Button>,
        }, {
            dataKey: 'name',
            label: 'Name',
            sortable: true,
        },{
            dataKey: 'currentVersion',
            label: 'Current Version',
            sortable: true,
        },{
            dataKey: 'location',
            label: 'Location',
            sortable: true,
        },{
            dataKey: 'status',
            label: 'Status',
            sortable: true,
        },{
            dataKey: 'lastAliveMessage',
            label: 'Last alive message',
            sortable: true,
        }, {
            dataKey: 'action',
            label: 'Actions',
            cellRenderer: () => <MoreVertIcon />,
        }]

    const data = [
      { deviceType: 'Tag', deviceID: 1, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'},
      { deviceType: 'Tag', deviceID: 1, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'},
      { deviceType: 'Tag', deviceID: 1, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'},
      { deviceType: 'Tag', deviceID: 1, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'},
      { deviceType: 'Tag', deviceID: 1, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'},
    ]

    const defaultCellRenderer = ({item, dataKey}) =>
        item[dataKey]

const createSortHandler = property => event => {
        this.props.onRequestSort(event, property)
    };

    const Table = ({data, columns, order, orderBy, className,children,...props}) =>
        // console.log(columns.map(({dataKey,label}) => dataKey))
        // console.log(data.map(item => columns.map(({dataKey, cellRenderer}) => defaultCellRenderer({item,dataKey}))))

        <MuiTable >
            <TableHead>
                <TableRow >
                    {columns.map(({dataKey, label}) =>
                        <TableCell compact>
                          <TableSortLabel active={orderBy = dataKey} direction={order}>
                            {label}
                          </TableSortLabel>
                        </TableCell>)}
                </TableRow>
            </TableHead>
            <TableBody>
            {data.map(item =>
                <TableRow hover>
                    {columns.map(({dataKey, cellRenderer}) =>
                        <TableCell compact>
                            {(cellRenderer || defaultCellRenderer)({item, dataKey})}
                        </TableCell>)}
                </TableRow>)}
            </TableBody>
        </MuiTable>


    class  EnhanceTable extends Component{
      state = {
            order: 'asc',
            orderBy: 'calories',
            selected: [],
            searchValue: '',

        };
        handleRequestSort = (event, property) => {
            const orderBy = property
            let order = 'desc'

            if (this.state.orderBy === property && this.state.order === 'desc') {
                order = 'asc'
            }

            const filterData = this.state.filterData.sort(
          (a, b) => order === 'desc' ? b[orderBy] > a[orderBy] : a[orderBy] > b[orderBy],
        )

            this.setState({ filterData, order, orderBy })
        };
      render() {
        const { order, orderBy, selected } = this.state
        return(
          <Paper style={{width: '100%'}}>
              <Table data={data} columns={columns} order={order} orderBy={orderBy} onRequestSort={this.handleRequestSort}/>
          </Paper>
        )
      }

    }