小编Rub*_*ins的帖子

React - 如何处理材料 ui 的数据网格表的特定列的单元格单击?

我正在使用名为 DataTable 的 Material ui 组件,并且我不知道如何检测特定列中任何单元格中的单击

这是我的表格,我想处理“操作”列中任何单元格中的单击: 在此输入图像描述

下面是我的组件代码:

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { PropTypes } from 'prop-types';

export default function DataTable({ rows, columns }) {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </div>
  );
}

DataTable.propTypes = {
  rows: PropTypes.arrayOf(
    PropTypes.shape({
      conteudo: PropTypes.string,
      disciplina: PropTypes.string,
      curso: PropTypes.string,
      data: PropTypes.string,
    })
  ).isRequired,
  // eslint-disable-next-line react/forbid-prop-types
  columns: PropTypes.array.isRequired,
};
Run Code Online (Sandbox Code Playgroud)

click reactjs

8
推荐指数
1
解决办法
2万
查看次数

如何使用 Material UI 处理简单表格中一行的点击

我正在使用 ui 材料的 DenseTable 组件,我希望能够从单击的行中获取所有数据,如果有人知道这将是一个很大的帮助

以下是我正在使用的组件的源代码:

import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, …
Run Code Online (Sandbox Code Playgroud)

onclick reactjs material-ui

3
推荐指数
1
解决办法
2万
查看次数

React - 如何更改Material ui的DataTable组件属性的语言?

我正在使用名为 DataTable 的 Material ui 组件,问题是过滤器字段是英语,我想知道是否有任何方法可以将其语言更改为葡萄牙语

下面是我的组件代码:

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { PropTypes } from 'prop-types';

export default function DataTable({ rows, columns }) {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </div>
  );
}

DataTable.propTypes = {
  rows: PropTypes.arrayOf(
    PropTypes.shape({
      conteudo: PropTypes.string,
      disciplina: PropTypes.string,
      curso: PropTypes.string,
      data: PropTypes.string,
    })
  ).isRequired,
  // eslint-disable-next-line react/forbid-prop-types
  columns: PropTypes.array.isRequired,
};

Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

我想将“取消排序、按描述排序、过滤、隐藏...”翻译为英语

datatable translate reactjs

3
推荐指数
2
解决办法
1万
查看次数

标签 统计

reactjs ×3

click ×1

datatable ×1

material-ui ×1

onclick ×1

translate ×1