Question

我对React这个词很新。我正在使用react-data-components在我的页面中显示数据。

我在此数据表中显示用户信息，并希望提供“编辑”链接，以便我可以更新用户信息。

以下是我的DataTable

FirstName LastName操作约翰米歇尔编辑 Mark Cuban编辑

根据github文档，Data-table只接受具有属性的列对象，并相应地呈现数据。 https://github.com/carlosrocha/react-data-components

任何帮助都会很感激!!!

Answer 1

最后我想通了。如果有人解决同样的问题，我发帖回答。我在github上找到了这个例子：https://github.com/carlosrocha/react-data-components/blob/HEAD/example/table/main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { DataTable } from 'react-data-components';

function buildTable(data) {
  const renderMapUrl =
    (val, row) =>
      <a href={`https://www.google.com/maps?q=${row['lat']},${row['long']}`}>
        Google Maps
      </a>;

  const tableColumns = [
    { title: 'Name', prop: 'name' },
    { title: 'City', prop: 'city' },
    { title: 'Street address', prop: 'street' },
    { title: 'Phone', prop: 'phone', defaultContent: '<no phone>' },
    { title: 'Map', render: renderMapUrl, className: 'text-center' },
  ];

  return (
    <DataTable
      className="container"
      keys="id"
      columns={tableColumns}
      initialData={data}
      initialPageLength={5}
      initialSortBy={{ prop: 'city', order: 'descending' }}
      pageLengthOptions={[ 5, 20, 50 ]}
    />
  );
}

fetch('/data.json')
  .then(res => res.json())
  .then((rows) => {
    ReactDOM.render(buildTable(rows), document.getElementById('root'));
  });

如何在react-data-components中显示锚标记或按钮

1 个答案: