react-mui-grid-x

Getting Started

import { MuiGridX } from "mui-grid-x";

const getList = () => _.range(_.random(10, 60)).map(value => ({
    column1: moment().add(value, 'hours').format('YYYY-MM-DD HH:mm'),
    column2: value,
    column3: value,
    column4: ['item-1', 'item-2', 'item-3', 'item-4'][_.random(0, 3)],
    column5: value
}));

const [list, setList] = useState(getList());

const columns = [{
    name: 'Column - 1',
    data: 'column1',
    width: 300,
    sort: true,
    renderColumn: value => (<Box sx={{ color: '#900' }}>{value}</Box>),
}, {
    name: 'Column - 2',
    data: 'column2',
    width: 300,
    sort: true,
}, {
    name: 'Column - 3',
    data: 'column3',
    width: 200,
    renderCell: value => (<button onClick={() => { alert(value) }}>Button</button>)
}, {
    name: 'Column - 4',
    data: 'column4',
    sort: true,
    width: 200,
}, {
    name: 'Column - 5',
    data: 'column5',
    width: 300,
}];

return (
    <Container>
        <Button
            sx={{ mt: 3 }}
            variant="outlined"
            onClick={() => {
                setList(getList())
            }}
        >
            Run
        </Button>
        <Box sx={{ mt: 3 }}>
            <MuiGridX
                columns={columns}
                list={list}
            />
        </Box>
    </Container>
)

Component API

MuiGridX Props

| # | name | caption | type | default | required | | --- | ----------------------- | ------------------------------------------------------------------------------------ | ---------------- | --------- | -------- | | 1 | columns | Set column data to MuiGridX table | MuiGridXColumn[] | [] | * | | 2 | list | Set data to MuiGridX table | any[] | [] | * | | 3 | height | Set the height of the MuiGridX table | number | string | 400 | | | 4 | pageSizeOptions | Rows per page | number[] | [5,10,15] | | | 5 | disabledPageSizeOptions | Disable the drop-down menu of the Rows per page field and change it to label display | boolean | false | |

MuiGridXColumn Props

| # | name | caption | type | default | required | | --- | ------------ | -------------------------- | ----------------------------------------- | ------- | -------- | | 1 | name | column display name | string | | * | | 1 | data | bind data property of list | string | | * | | 1 | width | column width | number | | | | 1 | sort | column sort | boolean | false | | | 1 | renderColumn | rerender content of column | (name) => jsx | | | | 1 | renderCell | rerender content of cell | (val,row,data,rowIndex,columnIndex)=> jsx | | |