时间戳

首页 > 解决方案 > 如何使 Material-UI 数据表响应窗口大小

html - 如何使 Material-UI 数据表响应窗口大小

问题描述

我正在使用 MUIDatatables 并且该表对窗口屏幕没有响应。我希望表格每行总是有一行，并使用水平滚动。

我尝试将表格放在 Material UI Grid 组件和 Grid 组件中，但这不起作用，或者我可能没有正确配置它。

这是我存放所有组件的地方

    <ThemeProvider theme={theme}>
      <div className={classes.root}>
        <CssBaseline />
        <nav className={classes.drawer}>
          <Hidden xsDown implementation="js">
            <Navigator open={this.state.drawerOpen} PaperProps={{ style: { width: drawerWidth } }} />
          </Hidden>
        </nav>
        <div className={classes.appContent}>
          <Header onDrawerToggle={this.handleDrawerToggle} />
          <main className={classes.mainContent}>
            <div>
              <Switch>
                <Route exact path="/EditContracts/:contractId/sections/:section" component={EditSection} />
                <Route exact path="/EditContracts/:contractId" component={EditContract} />
                <Route exact path="/EditUsers/:userId" component={EditUser} />
                <Route exact path="/EditEndpoints/:epId" component={EditEndpoint} />
                <Route exact path="/EditTunnels/:tunnel_id" component={EditTunnel} />
                <Route exact path="/EditContracts/:contractId/addSection" component={CreateSection} />
                <Route exact path="/Contracts/List" component={Contracts} />
                <Route exact path="/Contracts/Create" component={CreateContract} />
                <Route exact path="/Tunnel_Profiles/Create" component={CreateTunnel} />
                <Route exact path="/Contracts/Import" component={ImportContract} />
                <Route exact path="/Users/List" component={Users} />
                <Route exact path="/Tunnel_Profiles/List" component={TunnelProfiles} />
                <Route exact path="/Users/Create" component={CreateUser} />
                <Route exact path="/Endpoints/Create" component={CreateEndpoint} />
                <Route exact path="/Endpoints/List" component={Endpoints} />
                <Route exact path="/Community" component={PugCommunity} />
                <Route exact path="/Connections" component={Connections} />
                <Route exact path="/Dashboard" component={Dashboard} />
                <Route exact path="/Alerts" component={Alerts} />
                <Route exact path="/System_Setup/Organization" component={Organization} />
                <Redirect exact from="/System_Setup" to="/System_Setup/Organization" />
                <Redirect exact from="/Users" to="/Users/List" />
                <Redirect exact from="/Tunnel_Profiles" to="/Tunnel_Profiles/List" />
                <Redirect exact from="/Endpoints" to="/Endpoints/List" />
                <Redirect exact from="/Contracts" to="/Contracts/List" />
              </Switch>
            </div>
          </main>
        </div>
      </div>
    </ThemeProvider>
  </div>

我如何设置表格

    <Grid container direction='row'>
        <Grid item>
            <MUIDataTable data={data123} columns={columns123} options={options}/>
        </Grid>
    </Grid>

标签： htmlcssreactjsmaterial-ui

解决方案

这就是我解决它的方法。

<div style={{display: 'table', tableLayout:'fixed', width:'100%'}}>

    <MuiThemeProvider theme={this.getMuiTheme()}>
        <MUIDataTable data={data123} columns={this.state.columns} options={options}/>
    </MuiThemeProvider>

</div>

推荐阅读