React自定义Table组件：如何实现列配置渲染行内组件的机制

Got it, let's break down how to build this exact mechanism—just like Ant Design's Table—without wading through complex library source code. It's simpler than you think once you understand the core idea!

Core Concept #

The key is straightforward:

• Your Table component accepts a columns array, where each item can optionally define a render function.
• When rendering each table row, loop through the columns array. For every column:
  • If there's a render function, call it with the current row's data (and other useful params) to get custom JSX.
  • If not, just render the value from the row's data matching the column's dataIndex.

Step-by-Step Implementation #

1. Basic Table Component Structure #

First, create a foundational Table component that accepts columns and dataSource props:

import React from 'react';

const CustomTable = ({ columns, dataSource }) => {
  return (
    <table style={{ borderCollapse: 'collapse', width: '100%' }}>
      {/* Table Header */}
      <thead>
        <tr style={{ backgroundColor: '#f5f5f5' }}>
          {columns.map(column => (
            <th 
              key={column.key} 
              style={{ border: '1px solid #ddd', padding: '8px', textAlign: 'left' }}
            >
              {column.title}
            </th>
          ))}
        </tr>
      </thead>

      {/* Table Body (this is where the magic happens) */}
      <tbody>
        {dataSource.map((rowRecord, rowIndex) => (
          <tr key={rowRecord.key} style={{ borderBottom: '1px solid #ddd' }}>
            {columns.map((column, colIndex) => {
              // Get the raw value for this column from the row data
              const cellValue = column.dataIndex ? rowRecord[column.dataIndex] : '';

              // Use the render function if provided, else use the raw value
              const cellContent = column.render 
                ? column.render(cellValue, rowRecord, { rowIndex, colIndex })
                : cellValue;

              return (
                <td 
                  key={column.key} 
                  style={{ border: '1px solid #ddd', padding: '8px' }}
                >
                  {cellContent}
                </td>
              );
            })}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default CustomTable;

2. Use the Component Like Ant Design #

Now you can use your CustomTable exactly how you'd use AntD's Table, including defining render functions for custom columns:

import React from 'react';
import CustomTable from './CustomTable';

const App = () => {
  // Sample data source
  const data = [
    { key: '1', name: 'Alice Johnson', email: 'alice@example.com', age: 29 },
    { key: '2', name: 'Bob Williams', email: 'bob@example.com', age: 35 },
    { key: '3', name: 'Charlie Brown', email: 'charlie@example.com', age: 24 },
  ];

  // Column configuration with a custom render for actions
  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    { title: 'Email', dataIndex: 'email', key: 'email' },
    {
      title: 'Actions',
      key: 'actions',
      // Render function receives cell value, full row record, and indices
      render: (_, record) => (
        <div style={{ display: 'flex', gap: '8px' }}>
          <button onClick={() => handleEdit(record)} style={{ padding: '4px 8px' }}>Edit</button>
          <button onClick={() => handleDelete(record.key)} style={{ padding: '4px 8px', backgroundColor: '#ff4d4f', color: 'white', border: 'none' }}>Delete</button>
        </div>
      ),
    },
  ];

  // Dummy handlers for actions
  const handleEdit = (record) => {
    alert(`Editing ${record.name}`);
  };

  const handleDelete = (userId) => {
    alert(`Deleting user with ID: ${userId}`);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Custom Table with Render Functions</h2>
      <CustomTable columns={columns} dataSource={data} />
    </div>
  );
};

export default App;

Key Details to Note #

• The render function in your column config gets three main params:
  1. cellValue: The raw value from the row's dataIndex (you can ignore it if you don't need it, like in the Actions column above).
  2. record: The entire row object—this is super useful for accessing other fields in the row when rendering custom components.
  3. indices: An object with rowIndex and colIndex if you need positional info.
• You can extend this further: add support for width in column configs, handle sorting, or even nested data—just build on this core pattern.

Content from Stack Exchange, asked by Victor