Reactjs 修改React数据表扩展组件

我终于设法解决了我的顾虑.我还了解到，当前的react 数据表组件和扩展在更新组件以满足您的特定需求时没有太大的灵活性.该组件的最后一次更新是一年前的，总下载量在2-2.5k之间

因此，我使用了我的自定义输入和搜索按钮，过滤了通过后端接收的数据，并修复了导出和打印问题，我在 Select 器中将数据作为字符串提供，而不是(Row)=row.name方法

我还面临的另一个挑战是，数据表显示的内容在容器外部增长，从而提供了不需要的水平滚动选项，因此我对文本较多的列使用了WRAP属性，并为文本较少的列提供了固定宽度来解决此问题.

我的最新守则如下:

import DataTable from "react-data-table-component";
import {
  searchFunctionality,
  tableCustomStyles,
} from "../../utils/CommonFunctions";
import DataTableExtensions from "react-data-table-component-extensions";
import "react-data-table-component-extensions/dist/index.css";

export default function RolesData() {
  const [roles, setRoles] = useState([]);
  const [filteredValue, setFilteredValue] = useState("");
  const [finalFilteredValue, setFinalFilteredValue] = useState("");
  const [filteredData, setFilteredData] = useState([]);

useEffect(() => {
    const filteredData = searchFunctionality(
      roles,
      dataTableColumns,
      finalFilteredValue
    );
    setFilteredData(filteredData);
  }, [roles, finalFilteredValue]);

  const callGetRolesApi = async () => {
    try {
      let res = await getRoles();
      const { message, data, status } = res;

      console.log(res);
      if (status == clientSideStatus.success) {
        data.forEach((user, index) => {
          user.serial = index + 1;
          user.refinedRoles = user?.roles?.map((role) => role?.name).join(", ");  });

        setRoles(data);
        setFilteredData(data);
        console.log(data);
      } else {
        toast.error(message);
      }
    } catch (err) {
      console.error(err);
      toast.error(clientDefinedMessages.rolesError);
    }
  };

const dataTableColumns = [
    {
      name: "#",
      selector: "serial",
      sortable: false,
      width: "50px",
    },
    {
      name: "Role Name",
      selector: "name",
      sortable: true,
      // width: "140px",
      wrap: true,
    },
    {
      name: "Type of Role",
      selector: "roleTypeName",
      sortable: true,
      // width: "140px",
      wrap: true,
    },
    {
      name: "Status",
      selector: "status",
      sortable: true,
      width: "140px",
      wrap: true,
    },
    {
      name: "Member(s)",
      selector: "usersCount",
      style: { "text-decoration": "link", color: "blue" },
      sortable: false,
      // width: "140px",
      wrap: true,
      ignoreRowClick: true,
      allowOverflow: true,
      button: true,
      width: "150px",
      cell: (row) => (
        <>
          <button
            type='button'
            className='btn btn-link '
            onClick={() => handleMembersCountNavigation(row)}
          >
            {row.usersCount}
          </button>
        </>
      ),
    },
    {
      name: "Option(s)",
      cell: (row) => (
        <>
          <Dropdown>
            <Dropdown.Toggle
              variant='fade-primary'
              id={`dropdown-${row?.role?.id}`}
              className='d-flex'
            >
              <VerticalDots style={{ height: 20 }} />
            </Dropdown.Toggle>
            <Dropdown.Menu>
              <Dropdown.Item
                onClick={() => handleViewDetailsNavigation(row?.id)}
              >
                View Details
              </Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
        </>
      ),
      sortable: false,
      // width: "140px",
      wrap: true,
      ignoreRowClick: true,
      allowOverflow: true,
      button: true,
      width: "150px",
    },
  ];

  const tableData = {
    columns: dataTableColumns,
    data: filteredData,
  };

return (
    <>
      {!roles ? (
        <div className='d-flex justify-content-center p-3'>Loading...</div>
      ) : (
        <div
          className='d-flex align-intems-center flex-wrap col-md-6 col-lg-12'
          style={{ width: "100%", justifyContent: "center" }}
        >
          <a
            className='btn btn-primary d-flex align-items-center'
            to='/admin/administer/new-user'
            onClick={handleNavigation}
          >
            + Add User
          </a>
          <div
            className='input-group ms-auto'
            style={{ width: 340, display: "inline-flex" }}
          >
            <input
              type='text'
              className='form-control'
              placeholder='Search Users'
              value={filteredValue}
              aria-describedby='button-addon2'
              onChange={(event) => setFilteredValue(event.target.value)}
            />
            <button
              className='btn btn-outline-primary'
              type='button'
              id='button-addon2'
              onClick={() => setFinalFilteredValue(filteredValue)}
            >
              Go
            </button>
            <button
              type='button'
              className='btn btn-outline-primary'
              aria-label='Clear'
              onClick={() => {
                setFilteredValue("");
                setFinalFilteredValue("");
              }}
            >
              Clear
            </button>
          </div>

          <DataTableExtensions {...tableData} filter={false}>
            <DataTable
              columns={dataTableColumns}
              data={roles}
              noHeader
              // defaultSortField='lastName'
              defaultSortAsc={false}
              customStyles={tableCustomStyles}
              pagination
              highlightOnHover
            />
          </DataTableExtensions>
        </div>
      )}
    </>
  );

为设置样式和筛选数据创建的常见函数如下:

export const tableCustomStyles = {
  headCells: {
    style: {
      fontSize: "14px",
      fontWeight: "bold",
      paddingLeft: "8px",
      justifyContent: "left",
      color: "#1e78fd",
    },
  },
  cells: {
    style: {
      fontSize: "14px",
      paddingLeft: "8px",
      justifyContent: "left",
      whiteSpace: "normal",
    },
  },
  container: {
    display: "flex",
    justifyContent: "flex-end",
    marginBottom: "20px",
    // Add any other custom styles you need
  },
  filterInput: {
    marginRight: "10px",
    // Add any other custom styles for the filter input
  },
};

export const searchFunctionality = (data, dataTableColumns, filteredValue) => {
  let data1 = data?.filter((dat) => {
    if (filteredValue !== "") {
      for (let i = 0; i < dataTableColumns.length; i++) {
        if (dataTableColumns[i]?.selector) {
          if (
            dat[dataTableColumns[i]?.selector]
              ?.toString()
              ?.toLowerCase()
              ?.includes(filteredValue?.toLowerCase())
          )
            return true;
        }
      }
      return false;
    }
    return true;
  });
  data1?.forEach((user, index) => {
    user.serial = index + 1;
  });
  return data1;
};
````[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/P1JNH.png