Getting Started with react-advanced-datatable

`npm install cf-react-advanced-datatable`

Usage

1. Import the DataTable component, the necessary CSS styles, and Axios for making API requests:

import DataTable from 'cf-react-advanced-datatable';
import axios from 'axios';

2. Define the state for the DataTable component, including the data, current page, rows per page, and total pages:

  const [state, setState] = useState({
    rowsPerPage: 10,
    data: data,
    currentPage: 1,
    totalPages: 10,
    columnSortingBy: "",
    ascendingOrder: true
  });

3. Create a function to fetch the data from the API using Axios, and update the state with the results:

const fetchData = async () => {
  await axios
    .get(`http://localhost:3001/api/books/page=${state.currentPage}&total=${state.rowsPerPage}`)
    .then(res => {
      setState({ ...state, data: res.data.data, totalPages: res.data.total });
      console.log(res.data);
    });
};

4. Use the useEffect hook to fetch the data when the component mounts:

<DataTable
  className={'striped table-bordered package-table'}
  state={state}
  backendPagination={true}
  setState={setState}
  tableOptions={[
    {
      column: '#',
      appearAs: '#',
      width: '30px',
      frozen: true,
      accessType: 'hide',
      render: (object, value) => (
        <div className={'h-100 d-flex'}>
          <input type="checkbox" className='m-auto' />
        </div>
      ),
    },
    {
      column: 'age',
      appearAs: 'Age',
      width: '180px',
      frozen: true,
      render: null,
      accessType: 'write',
      allowSort: true
    },
    {
      column: 'name',
      appearAs: 'Name',
      width: '400px',
      frozen: false,
      allowSort: false,
      className: "d-flex",
      accessType: 'write',
      inputs: [
        {
          label: "Update",
          type: "button",
          passValue: "age",
          className: "btn btn-sm",
          actionType: "update",
          hideIf: [
            { field_name: "description", operator: "!=", value: "Arnold" },
          ],
        },
        {
          label: "Update",
          type: "text",
          passValue: "age",
          className: "form-control py-0 mx-1",
          actionType: "update",
          hideIf: [
            { field_name: "age", operator: ">", value: "100" },
          ],

        },
        {
          type: "select",
          passValue: "age",
          className: "form-select w-25 py-0 my-0",
          actionType: "update",
          hideIf: [
            { field_name: "description", operator: "==", value: "Arnold" },
          ],
          options: [
            { id: 1, name: "Red" },
            { id: 2, name: "Blue" },
            { id: 3, name: "Green" },
            { id: 4, name: "Pink" },
            { id: 5, name: "Black" },
          ]
        }
      ],
      render: (object, value) => (
        <div className={`h-100 d-flex align-items-center px-2`}>

          {object.age >= 100 ? <input value={value} type='text' /> : <span>{value}</span>}
        </div>
      ),
    }
  ]}
/>

5. Define functions to handle events from inputs defined by the inputs array in the table defination object

  const handleOnBlur = (props) => {
    const { e, passValue, actionType, record, index } = props;
    if (actionType == "update") {
      console.log("onBlurred", props)
    }
  }

  const onButtonClick = (props) => {
    const { e, passValue, actionType, record, index } = props;
    if (actionType == "update") {
      console.log("on click", props)
    }
  }

  const onInputChange = (props) => {
    const { e, passValue, actionType, record, index } = props;
    if (actionType == "update") {
      console.log("onInput change", props)
    }
  }
const sanitize =(value)=>{
  //process value here
  return value;
}
  return (
    <Fragment>
      <div className='' style={{ overflow: "auto" }}>
        <Datatable
          backendPagination
          hidePagination={false}
          onChange={() => { }}
          className={'tables table-bordered table-striped'}
          state={state}
          stickyCellClassName="bg-light "
          stickyHeaderClassName="bg-dark py-2"
          headerClassName="bg-primary"
          setState={setState}
          tableOptions={tableoptions}
          fontSize={13}
          sanitize={sanitize}
          onButtonClick={onButtonClick}
          onInputBlur={handleOnBlur}
          onInputChange={onInputChange}
        />
      </div>

    </Fragment>
  )
}

export default App;

Props

The DataTable component accepts the following props:

• className: The class name for the table. Optional.
• backendPagination: controls whether you want to paginate data from the server or not. By default the package paginates from the client side.
• state: An object that defines the state of the table, including the data, current-page, rows-per-page, and total-pages. Required.
• setState: A function to update the state of the table. Required.
• tableOptions: An array of objects that define the columns of the table, including their name, appearance, width, and rendering function. Required.