A highly customizable and flexible table component for React

Support buymeacoffee

buymeacoffee

Demo and documentation

You can access all code examples and documentation on site https://mertkahramanturk.github.io/react-flexible-table/?path=/story/components-flexibletable--basic

Issue Prioritizing

Please share your problems, bugs and development requests. Issue

Installation

1.Install package

To install react-flexible-table with npm:

npm install react-flexible-table

Types / General Table Props

Columns

You can give an array directly when creating the columns of the table. The key value must match the field name of the data.

table_columns = [
	{
		"title": "Id",
		"key": "id",
		"sortable": true,
		"searchable": true,
		"openTableDetail": true,
		"cellStyle": { "minWidth": "100px", "maxWidth:": "100px" }
	},
]

If you want to show a column in a different style, you can do so as follows.

	const columns = table_columns?.map((col) => {
		if (col.key === 'status') {
			return {
				key: col.key,
				title: col.title,
				sortable: col.sortable,
				searchable: col.searchable,
				cellStyle: col.cellStyle,
				openTableDetail: col.openTableDetail,
				render: (row) => (
					<div className=''>
						<span className={{
							"Active": "status-active",
							"Passive": "status-passive",
							"Pending": "status-pending"
						}[row.status]}>{row.status} </span> 
					</div>
				),
			};
		}
		return {
			key: col.key,
			title: col.title,
			cellStyle: col.cellStyle,
			sortable: col.sortable,
			searchable: col.searchable,
			openTableDetail: col.openTableDetail
		};
	});

Data

You can send the data structure as an array. Your column keys and field names will match and be displayed in the table.

[
  {
    "id": 1,
    "name": "John Smith",
    "email": "[email protected]",
    "address": "123 Main St",
    "city": "New York",
    "state": "NY",
    "zip": "10001",
    "phone": "(212) 555-1234",
		"status": "Pending"
  },
	...
]

Actions

Optional row-level action buttons (e.g., edit, delete, info).

	const actions = [
		{
			icon: <img src={InfoIcon} alt="InfoIcon" />,
			className: 'font-size-14 text-dark',
			onClick: (rowData) => handleActionClick(rowData?.id),
			style: { backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }
		}
	];

tableDetail

openTableDetail indicates the component that will be opened when the column component marked as true is clicked. Each row opens on its own and closes on the second click. You can access the row information directly from here.

	const renderTableDetail = (data) => (
		<div>
			<div className="d-flex align-items-center gap-2">
				<div className="font-size-14 text-dark">Address:</div>
				<div className="font-size-14">{data.address}</div>
			</div>
			<div className="d-flex align-items-center gap-2">
				<div className="font-size-14 text-dark">City:</div>
				<div className="font-size-14">{data.city}</div>
			</div>
			<div className="d-flex align-items-center gap-2">
				<div className="font-size-14 text-dark">State:</div>
				<div className="font-size-14">{data.state}</div>
			</div>
			<div className="d-flex align-items-center gap-2">
				<div className="font-size-14 text-dark">Zipcode:</div>
				<div className="font-size-14">{data.zip}</div>
			</div>
		</div>
	)

fivotColumn & fivotLeft

:warning: There should be a container structure on the page, such as maxWidth etc.

As the number of data in the table grows, it does not fit on the screen and users examine the data with the scrolling process. The information that seems important here can be fixed with fivotColumn, this column always remains fixed during the scrolling process.

	return (
		<div style={{maxWidth: '960px'}}>
			<FlexibleTable
				externalSort={false}
				externalSearch={false}
				searchPlaceholder='Search...'
				setFilter={handleFilter}
				columns={columns}
				actions={actions}
				data={data}
				pagination={true}
				onRowClick={handleRowClick}
				changePage={changePage}
				changePageSize={changePageSize}
				page={page}
				pageSize={pageSize}
				totalItems={totalItems}
				totalPages={totalPages}
				loading={loading}
				fivotColumn={0}
				fivotLeft={100}
				lineStriped={true}
				tableDetail={renderTableDetail}
				handleMultiSelect={handleMultiSelect}
				stickyHeader={true}
				loadingComponent={customLoading}
				previousData={[]}
			/>
		</>
	)

Usage

Here is a basic example of using react-flexible-table within a react application.

import { useCallback } from "react";
import "./App.css";
import { FlexibleTable } from "react-flexible-table";
import "../node_modules/react-flexible-table/dist/index.css"; or import "react-flexible-table/dist/index.css";
import data from "./test-data.json";
import InfoIcon from "./info-circle.svg";
const table_columns = [
  {
    title: "Id",
    key: "id",
    sortable: true,
    openTableDetail: true,
    cellStyle: { minWidth: "100px", "maxWidth:": "100px" },
  },
  {
    title: "İsim",
    key: "name",
    searchable: true,
    sortable: true,
    cellStyle: { minWidth: "200px", "maxWidth:": "200px" },
  },
  {
    title: "Email",
    key: "email",
    sortable: true,
    cellStyle: { minWidth: "200px", "maxWidth:": "200px" },
  },
  {
    title: "Phone",
    key: "phone",
    sortable: false,
    cellStyle: { minWidth: "200px", "maxWidth:": "200px" },
  },
  {
    title: "Status",
    key: "status",
    sortable: false,
    cellStyle: { minWidth: "200px", "maxWidth:": "200px" },
  },
];

function App() {
  const handleFilter = useCallback(() => {
    console.log("handleFilter");
  }, []);

  const handleRowClick = () => {
    console.log("handleRowClick");
  };
  const handleMultiSelect = (data) => {
    console.log("handleMultiSelect: ", data);
  };

  const handleActionClick = () => {
    console.log("handleActionClick");
  };
  const changePage = () => {
    console.log("changePage");
  };

  const changePageSize = () => {
    console.log("changePageSize");
  };

  const page = 1;
  const pageSize = 20;
  const totalItems = 28;
  const totalPages = 1;
  const loading = false;

  const renderTableDetail = (data) => (
    <div>
      <div className="d-flex align-items-center gap-2">
        <div className="font-size-14 text-dark">Address:</div>
        <div className="font-size-14">{data.address}</div>
      </div>
      <div className="d-flex align-items-center gap-2">
        <div className="font-size-14 text-dark">City:</div>
        <div className="font-size-14">{data.city}</div>
      </div>
      <div className="d-flex align-items-center gap-2">
        <div className="font-size-14 text-dark">State:</div>
        <div className="font-size-14">{data.state}</div>
      </div>
      <div className="d-flex align-items-center gap-2">
        <div className="font-size-14 text-dark">Zipcode:</div>
        <div className="font-size-14">{data.zip}</div>
      </div>
    </div>
  );

  const actions = [
    {
      icon: <img src={InfoIcon} alt="InfoIcon" />,
      className: "font-size-14 text-dark",
      onClick: (rowData) => handleActionClick(rowData?.id),
      style: {
        backgroundColor: "transparent",
        border: "none",
        cursor: "pointer",
      },
    },
  ];

  const columns = table_columns?.map((col) => {
    if (col.key === "status") {
      return {
        key: col.key,
        title: col.title,
        sortable: col.sortable,
        searchable: col.searchable,
        cellStyle: col.cellStyle,
        openTableDetail: col.openTableDetail,
        render: (row) => (
          <div className="">
            <span
              className={
                {
                  Active: "status-active",
                  Passive: "status-passive",
                  Pending: "status-pending",
                }[row.status]
              }
            >
              {row.status}{" "}
            </span>
          </div>
        ),
      };
    }
    return {
      key: col.key,
      title: col.title,
      cellStyle: col.cellStyle,
      sortable: col.sortable,
      searchable: col.searchable,
      openTableDetail: col.openTableDetail,
    };
  });

  return (
    <>
      <FlexibleTable
        externalSort={false}
        externalSearch={false}
        searchPlaceholder="Search..."
        setFilter={handleFilter}
        columns={columns}
        actions={actions}
        data={data}
        pagination={true}
        onRowClick={handleRowClick}
        changePage={changePage}
        changePageSize={changePageSize}
        page={page}
        pageSize={pageSize}
        totalItems={totalItems}
        totalPages={totalPages}
        loading={loading}
        fivotColumn={0}
        fivotLeft={100}
        lineStriped={true}
        tableDetail={renderTableDetail}
        handleMultiSelect={handleMultiSelect}
        stickyHeader={true}
      />
    </>
  );
}

export default App;

ReactDOM.render(<App />, document.getElementById("react-div"));

Contributors

Code Contributors

License

This project is licensed under the terms of the MIT license.