标签: react-data-table-component

我需要在我的反应数据表中设置每页值，默认情况下数据表自动管理该值，但我使用 React Paginate 作为自定义分页组件，它只管理页面。

如何在不删除 React Paginate 的情况下更改此值？

数据表：

<DataTable
    noHeader
    pagination
    paginationComponent={CustomPagination}
    paginationPerPage={store.perPage}
    paginationRowsPerPageOptions={[10, 25, 50, 100]}
    className={dataTableStyles}
    columns={columns}
    noDataComponent={<img src={EmptyState}/>}
    progressPending={spinner}
    paginationDefaultPage={currentPage}
    progressComponent={<Spinner color="primary" size="md" className="justify-self-center align-self-center"/>}
    conditionalRowStyles={customDisabledStyle ? customDisabledStyle : disabledStyle}
    sortIcon={<ChevronDown size={10} />}
    data={dataToRender()}
/>

自定义分页：

const CustomPagination = (e) => {
  const count = Number((store.total / rowsPerPage))
  return (
    <Row className='mx-0'>

      <Col className='d-flex justify-content-start mt-2' sm='6'>
        <p>Mostrando {showingFrom} a {showingTo} de {showingOf} registros {totalRows}</p>
      </Col>

      <Col className='d-flex justify-content-end' sm='6'>
        <ReactPaginate
          previousLabel={''}
          nextLabel={''}
          forcePage={currentPage !== 0 …

希望你们一切都好。

我正在尝试使用 jbetancur （https://github.com/jbetancur/react-data-table-component#readme）中的react-data-table-component，并且我想实现以下内容：

目前我有这个：

我想得到这个：

因此，要恢复我想要的就是为每个（或不是）列提供一个过滤器选项。我希望能够为某一列提供按该列进行过滤的能力。

我检查了文档并进行了一些搜索，但没有得到任何结果，所以我不确定这是否可行。

如果您需要更多信息来帮助，请告诉我。

提前致谢。

阅读文档，React Data Table似乎有一种方法可以将额外的 Props 传递给expandableRowsComponent.

这是从文档中复制粘贴的：

可扩展组件属性

ExpandableComponentProps 允许您将额外的 props 传递给扩展器组件并防止 TypeScript 抱怨：

import * as React from 'react';
import DataTable, { ExpanderComponentProps } from 'react-data-table-component';

interface Row {
    title: string;
    director: string;
    year: string;
}

interface Props extends ExpanderComponentProps<Row> {
    // currently, props that extend ExpanderComponentProps must be set to optional.
    someTitleProp?: string;
}

const ExpandableRowComponent: React.FC<Props> = ({ data, someTitleProp }) => {
    return (
        <>
            <p>{someTitleProp}</p>
            <p>{data.title}</p>
            <p>{data.director}</p>
            <p>{data.year}</p>
        </>
    ); …

是否可以更改反应数据表组件中的默认文本？例如，当没有可用数据时，它会显示“没有可显示的记录”，但我需要根据用户选择的语言更改文本。是否可以更改默认文本和字体？

我正在使用react-data-table-components，并且只是按照文档给出的说明进行操作，但它向我显示了一个错误（其中一些在下面的文本中）：

错误

以下是我在文档中复制的示例代码：

import DataTable from 'react-data-table-component';

const App = () => {

  const columns = [
      {
          name: 'Title',
          selector: row => row.title,
      },
      {
          name: 'Year',
          selector: row => row.year,
      },
  ];
  const data = [
      {
          id: 1,
          title: 'Beetlejuice',
          year: '1988',
      },
      {
          id: 2,
          title: 'Ghostbusters',
          year: '1984',
      },
  ]

  return (
    <>
        <DataTable
            columns={columns}
            data={data}
        />
    </>
  )
}

export default App

下面是package.json文件：

包.json

这些是我的控制台中显示的错误：

StyledComponent.ts:159 styled-components：看起来一个未知的 prop“responsive”正在被发送到 DOM，这可能会触发 React 控制台错误。<StyleSheetManager …