Service Plus Table

This is a Reusable Table Component with adavanced features.

The Table can be used as a Display table as well as an Action table

Hero features

1. Controlled as well as Uncontrolled Pagination.
2. Dynamic Sorting of columns.
3. Global Search.
4. Column Pinning - Pin columns to the right/left.
5. Pass customStyles.

Usage

function Component() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("http://localhost:3000/test");
      const result = await response.json();
      setData(result);
    };
    fetchData();
  }, []);

  const handleAction = (action, rowData) => {
    console.log(`Action: ${action}`, rowData);
  };

  const actions = ["allow", "reject"];

  return (
    <Table apiData={data} actions={actions} onAction={handleAction} check />
  );
}

Props accepted by the Table

1. apiData - the data to be shown
2. actions - If the table is an action table,then the actions will be inherited.
3. onAction - handler for the action
4. check - to make it a multicheck
5. customStyles -

 const defaultStyles = {
    header: {
      bg: "bg-slate-100",
      text: "text-black",
      border: "border",
    },
    body: {
      bg: "bg-white",
      text: "text-black",
      border: "border",
    },
  };

6. pinning - to enable pinning of columns