化学反应JS中的动态列和数据行

Question

我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。我需要在数据网格的动态列和行在反应JS。这是我的密码。

    let response_data = {initial_data: [
    {
      "id":1,
      "Did I see this plant in 2016?":"No",
      "Did I see this plant in 2017?":"Yes",
      "How Many?":1,
      "User Data 4":"x",
      "User Data 5":'nil',
      "Did I see this plant in 2022?":"No",
      "Name":"Abronia alpina"
      },
     {
      "id":2,
      "Did I see this plant in 2016?":"No",
      "Did I see this plant in 2017?":"No",
      "How Many?":11,
      "User Data 4":"x",
      "User Data 5":'nil',
      "Did I see this plant in 2022?":"Yes",
      "Name":"Abronia alpina1"
     }
   ]
   };

  let row = response_data.initial_data
  let columns = Object.keys(response_data.initial_data).map((key, id)=>{
   [{
    field: key,
    headerName: key,
    width: 100
   }]
  })

return{
  <DataGrid
          components={{ Toolbar: QuickSearchToolbar }}
          rows={rows}
          columns={columns}
          pageSize={pageSize}
          rowsPerPageOptions={[5, 10, 20]}
          autoHeight={true}
          onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
          pagination
          componentsProps={{
            toolbar: {
              value: searchText,
              onChange: (event) =>
                requestSearch(event.target.value),
              clearSearch: () => requestSearch(""),
            },
          }}
        />
}

我需要列和行应该是动态的，而不是静态的使用react。

Answer 1

您可以使用数据网格的getRowHeight属性来动态高度和动态列的flex。

<dataGrid
  column={[{ field: 'username', flex: 0.5 }, { field: 'age', flex: {0.5} }]}
  tableRowHeight={() => 'auto'}
/>

柱动态宽度 动态行高