ka-table-featureful v1.0.7

Getting Started with ka-table-featureful

This project is optimised on basis of ka-table npm package. It allows to use all the functionality of ka-table based on configs such as to set flags of pagination, editable rows etc. in your config.

Installation

npm

npm i ka-table-featureful

Usage

Basic Example

• Add config to your App.js and pass those config to Listing component.
• Additionally, you can make your config flags true or false based on your requirements.

import { useEffect, useState } from "react";
import Listing from "ka-table-featureful";

const userData = Array(50)
  .fill(undefined)
  .map((_, index) => ({
    column1: `column:1 row:${index}`,
    column2: `column:2 row:${index}`,
    column3: `column:3 row:${index}`,
    column4: `column:4 row:${index}`,
    column5: `column:5 row:${index}`,
    column6: `column:6 row:${index}`,
    id: index,
  }));

const columns = [
  { key: "column1", title: "Column 1", dataType: "string" },
  { key: "column2", title: "Column 2", dataType: "string" },
  { key: "column3", title: "Column 3", dataType: "string" },
  { key: "column4", title: "Column 4", dataType: "string" },
  { key: "column5", title: "Column 5", dataType: "string" },
  { key: "column6", title: "Column 6", dataType: "string" },
];

const config = {
  remoteLoad: {
    enabled: true,
    text: "Loading data",
  },
  columnResizing: {
    enabled: true,
  },
  exportCSV: {
    enabled: false,
    text: "Export",
    filename: "table.data.csv",
    style: {
      marginBottom: 20,
      marginLeft: 20,
    },
  },
  editingCell: {
    enabled: false,
  },
  editingRow: {
    enabled: false,
    editButton:
      "https://komarovalexander.github.io/ka-table/static/icons/edit.svg",
    saveButton:
      "https://komarovalexander.github.io/ka-table/static/icons/save.svg",
    closeButton:
      "https://komarovalexander.github.io/ka-table/static/icons/close.svg",
    style: { display: "flex", justifyContent: "space-between" },
    editButtonStyle: {},
    saveButtonStyle: {},
    closeButtonStyle: {},
  },
  filterHeader: {
    enabled: false,
  },
  filterExtended: {
    enabled: false,
    fields: [
      {
        caption: "Column 4",
        name: "column4",
        operators: [
          {
            caption: "Contains",
            name: "contains",
          },
          {
            caption: "Does not Contain",
            name: "doesNotContain",
          },
        ],
      },
      {
        caption: "ID",
        name: "id",
        operators: [
          {
            caption: "Equals",
            name: "=",
          },
          {
            caption: "Does not Equal",
            name: "<>",
          },
          {
            caption: "More than",
            name: ">",
          },
          {
            caption: "Less than",
            name: "<",
          },
        ],
      },
    ],
    groups: [
      {
        caption: "And",
        name: "and",
      },
      {
        caption: "Or",
        name: "or",
      },
    ],
    filter: {
      groupName: "and",
      items: [
        // {
        //     field: 'column4',
        //     key: '1',
        //     operator: 'contains',
        //     value: 'column:4 row:6',
        // },
        // {
        //     field: 'id',
        //     key: '2',
        //     operator: '<',
        //     value: '11',
        // },
      ],
    },
  },
  search: {
    enabled: false,
    defaultText: "column:4 row:5",
    style: {},
  },
  stateStoring: {
    enabled: false,
  },
  pagination: {
    enabled: true,
    position: "topAndBottom",
    pageIndex: 0,
    pageSize: 10,
    pageSizes: [5, 10, 15],
  },
  sortingExtended: {
    enabled: false,
    nonSortedKeys: ["column1"],
  },
  hoverRow: {
    enabled: false,
  },
};

function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    // Simulate an asynchronous data update after 2 seconds
    const timeoutId = setTimeout(() => {
      setData(userData); // Update only the 'data' state
    }, 1000);

    return () => {
      clearTimeout(timeoutId);
    };
  }, []);

  return (
    <div>
      <Listing data={data} columns={columns} config={config} />
    </div>
  );
}

export default App;