Skip to main content

Table

TkTable is a component that allows you to display data in a tabular manner. It's generally called a datatable.

import { TkTable } from '@takeoff-ui/react'

Basic​

The basic features of the TkTable component are demonstrated.

View Code
const column: ITableColumn[] = [
  {
    field: "id",
    header: "Id",
  },
  {
    field: "name",
    header: "Name",
  },
  {
    field: "category",
    header: "Category",
  },
  {
    field: "quantity",
    header: "Quantity",
  },
];

return (
  <div style={{ padding: "8px" }}>
    <TkTable columns={column} data={basicData} />
  </div>
);

Striped​

To enable striped mode, set the striped prop to true. This feature displays rows with alternating background colors.

View Code
<TkTable columns={column} data={basicData} striped />

Header Type​

The headerType prop is used to change the style of the table headers and allows you to customize the headers' style with values such as basic, primary, and dark.

headerType is basic

View Code
<TkTable columns={column} data={headerTypeData} headerType="basic" />

Selection​

This feature allows users to select rows in the table. The selected rows are visually highlighted and can be used for various actions.

View Code
const column: ITableColumn[] = [
  {
    field: "id",
    header: "Id",
  },
  {
    field: "name",
    header: "Name",
  },
  {
    field: "category",
    header: "Category",
  },
  {
    field: "quantity",
    header: "Quantity",
  },
];
const [selectionList, setSelectionList] = useState();
const [mode, setMode] = useState();
return (
  <div style={{ padding: "8px" }}>
    <TkTable
      columns={column}
      data={basicData}
      dataKey="id"
      selectionMode={mode}
      onTkSelectionChange={(e: CustomEvent) =>
        setSelectionList({ ...e.detail })
      }
    />
    <p>{JSON.stringify(selectionList)}</p>
  </div>
);

Filter and Sorting​

The table supports three types of filtering:

  • Text input filtering: Allows free text search in columns
  • Checkbox filtering: Enables selecting multiple values from predefined options
  • Radio filtering: Allows selecting a single value from predefined options

The filtering type can be configured using the filterType property in column definition. For checkbox and radio filters, you need to provide filterOptions with value-label pairs.



View Code
const column: ITableColumn[] = [
    {
      field: 'id',
      header: 'Id',
    },
    {
      field: 'name',
      header: 'Input Filter',
      searchable: true,
      sortable: true,
      sorter: (a: any, b: any) => (a.name > b.name ? 1 : -1),
      filter: (value: string, row: any) =>
        row.name
          .toString()
          .toLowerCase()
          .indexOf(value.toString().toLowerCase() as string) > -1,
    },
    {
      field: 'status',
      header: 'Checkbox Filter',
      searchable: true,
      filterType: 'checkbox',
      filterOptions: [
        { value: 'active', label: 'Active' },
        { value: 'inactive', label: 'Inactive' },
        { value: 'pending', label: 'Pending' },
      ],
      filterElements: {
        icon: 'filter_list',
        optionsSearchInput: { show: true, placeholder: 'Filter' },
      },
    },
    {
      field: 'group',
      header: 'Radio Filter',
      searchable: true,
      filterType: 'radio',
      filterOptions: [
        { value: 'group 1', label: 'Group 1' },
        { value: 'group 2', label: 'Group 2' },
        { value: 'group 3', label: 'Group 3' },
      ],
      filterElements: {
        optionsSearchInput: { show: true, placeholder: 'Filter' },
      },
    },
    {
      field: 'quantity',
      header: 'Quantity',
      sortable: true,
      sorter: (a: any, b: any) =>
        Number(a.quantity) > Number(b.quantity) ? 1 : -1,
    },
  ];


   const data = [
    {
      id: 'f230fh0g3',
      name: 'Bamboo Watch',
      status: 'active',
      group: 'group 1',
      quantity: 24,
    },
    {
      id: 'nvklal433',
      name: 'Black Watch',
      status: 'inactive',
      group: 'group 2',
      quantity: 42,
    },
    {
      id: 'zz21cz3c1',
      name: 'Blue Band',
      status: 'active',
      group: 'group 3',
      quantity: 87,
    },
    {
      id: '244wgerg2',
      name: 'Blue T-Shirt',
      status: 'pending',
      group: 'group 1',
      quantity: 12,
    },
    {
      id: 'h456wer53',
      name: 'Bracelet',
      status: 'inactive',
      group: 'group 2',
      quantity: 45,
    },
  ];
  
  return <TkTable columns={column} data={data} />;

Multi Sorting​

This feature allows users to sort the table by multiple columns simultaneously. Users can click on the column headers to apply sorting, and the order of sorting can be adjusted by clicking on the headers in the desired sequence.


View Code
const column: ITableColumn[] = [
    {
      field: 'id',
      header: 'Id',
    },
    {
      field: 'name',
      header: 'Name',
      sortable: true,
      sorter: (a: any, b: any) => {
        if (a.name < b.name) return -1;
        if (a.name > b.name) return 1;
        return 0;
      },
    },
    {
      field: 'status',
      header: 'Status',
      sortable: true,
      sorter: (a: any, b: any) => {
        if (a.status < b.status) return -1;
        if (a.status > b.status) return 1;
        return 0;
      },
    },
    {
      field: 'group',
      header: 'Group',
      sortable: true,
      sorter: (a: any, b: any) => {
        if (a.group < b.group) return -1;
        if (a.group > b.group) return 1;
        return 0;
      },
    },
    {
      field: 'quantity',
      header: 'Quantity',
      sortable: true,
      sorter: (a: any, b: any) => {
        if (a.quantity < b.quantity) return -1;
        if (a.quantity > b.quantity) return 1;
        return 0;
      },
    },
  ];

  const data = [
    {
      id: 'zz21cz3c1',
      name: 'Blue Band',
      status: 'active',
      group: 'group 3',
      quantity: 87,
    },
    {
      id: 'h456wer53',
      name: 'Bracelet',
      status: 'inactive',
      group: 'group 2',
      quantity: 45,
    },
    {
      id: 'a789def12',
      name: 'Blue Band',
      status: 'pending',
      group: 'group 1',
      quantity: 24,
    },
    {
      id: 'b123ghi34',
      name: 'Blue Band',
      status: 'inactive',
      group: 'group 2',
      quantity: 12,
    },
    {
      id: 'c456jkl56',
      name: 'Smart Watch',
      status: 'active',
      group: 'group 3',
      quantity: 24,
    },
    {
      id: 'e012pqr90',
      name: 'Bracelet',
      status: 'active',
      group: 'group 1',
      quantity: 45,
    },
  ];

  return <TkTable columns={column} data={data} multiSort={true} />;

Clear Filters and Sorting​

This example demonstrates how to clear all filters and sorting settings programmatically using the clearFilters and clearSorting methods.

View Code
const Example = () => {
  const tableRef = useRef(null);

  const column: ITableColumn[] = [
    {
      field: "id",
      header: "Id",
    },
    {
      field: "name",
      header: "Name",
      searchable: true,
      sortable: true,
      sorter: (a: any, b: any) => (a.name > b.name ? 1 : -1),
      filter: (value: string, row: any) =>
        row.name.toString().toLowerCase().indexOf(value.toString().toLowerCase() as string) > -1,
    },
    {
      field: "category",
      header: "Category",
      searchable: true,
      filterType: 'checkbox',
      filterOptions: [
        { value: 'Accessories', label: 'Accessories' },
        { value: 'Clothing', label: 'Clothing' },
        { value: 'Fitness', label: 'Fitness' },
      ],
    },
    {
      field: "quantity",
      header: "Quantity",
      sortable: true,
      sorter: (a: any, b: any) =>
        Number(a.quantity) > Number(b.quantity) ? 1 : -1,
    },
  ];

  const handleClearFilters = () => {
    tableRef.current?.clearFilters();
    // For server-side pagination, after clearing filters,
    // serverRequest method is called to trigger tkRequest event
    // tableRef.current?.serverRequest();
  };

  const handleClearSorting = () => {
    tableRef.current?.clearSorting();
    // For server-side pagination, after clearing filters,
    // serverRequest method is called to trigger tkRequest event
    // tableRef.current?.serverRequest();
  };

  return (
    <div>
      <div style={{ marginBottom: '1rem', display: 'flex', gap: '0.5rem' }}>
        <TkButton onClick={handleClearFilters} label="Clear Filters"></TkButton>
        <TkButton onClick={handleClearSorting} label="Clear Sorting"></TkButton>
      </div>
      <TkTable ref={tableRef} columns={column} data={basicData}/>
    </div>
  );
};

Pagination​

Client side pagination

View Code
const column: ITableColumn[] = [
    {
      field: "id",
      header: "Id",
    },
    {
      field: "name",
      header: "Name",
      searchable: true,
      sortable: true,
      sorter: (a: any, b: any) => (a.name > b.name ? 1 : -1),
      filter: (value: string, row: any) =>
        row.name
          .toString()
          .toLowerCase()
          .indexOf(value.toString().toLowerCase() as string) > -1,
    },
    {
      field: "category",
      header: "Category",
      searchable: true,
      sortable: true,
      sorter: (a: any, b: any) => (a.category > b.category ? 1 : -1),
      filter: (value: string, row: any) =>
        row.category
          .toString()
          .toLowerCase()
          .indexOf(value.toString().toLowerCase() as string) > -1,
    },
    {
      field: "quantity",
      header: "Quantity",
      sortable: true,
      sorter: (a: any, b: any) =>
        Number(a.quantity) > Number(b.quantity) ? 1 : -1,
    },
  ];
  return (
    <TkTable
      columns={column}
      data={data}
      paginationMethod="client"
      rowsPerPage={5}
      totalItems={data.length}
    />
  );

Server Side​

Server side sorting, filter ang pagination example.

View Code
const column: ITableColumn[] = [
  {
    field: "id",
    header: "Id",
  },
  {
    field: "name",
    header: "Name",
    searchable: true,
    sortable: true,
  },
  {
    field: "category",
    header: "Category",
    searchable: true,
    sortable: true,
  },
  {
    field: "quantity",
    header: "Quantity",
    sortable: true,
  },
];

const tableRef = useRef<HTMLTkTableElement>(null);
const [data, setData] = useState();
const [totalItem, setTotalItem] = useState();
const [rowsPerPage, setRowsPerPage] = useState(5);
const [loading, setLoading] = useState(false);

const handleRequest = async (e: TkTableCustomEvent<ITableRequest>) => {
  setLoading(true);
  const result: any = await fetchFromServer(
    e.detail.currentPage,
    e.detail.rowsPerPage,
    e.detail.filters,
    e.detail.sortField,
    e.detail.sortOrder
  );

  setTotalItem(result?.totalItem);
  setRowsPerPage(e.detail.rowsPerPage);
  setData(result?.data);
  setLoading(false);
};

useEffect(() => {
  tableRef.current.serverRequest();
}, []);

return (
  <>
    <TkButton
      icon="refresh"
      variant="neutral"
      type="text"
      onTkClick={async () => {
        setLoading(true);
        const result: any = await fetchFromServer(1, 5, [], null, null);

        setTotalItem(result?.totalItem);
        setData(result?.data);
        setLoading(false);

        tableRef.current!.setCurrentPage(1);
      }}
    />
    <TkTable
      ref={tableRef}
      columns={column}
      data={data}
      paginationMethod="server"
      rowsPerPage={rowsPerPage}
      totalItems={totalItem}
      loading={loading}
      onTkRequest={handleRequest}
    />
  </>
);

Custom Cell​

View Code
const column: ITableColumn[] = [
    {
      field: "id",
      header: "Id",
    },
    {
      field: "name",
      header: "Name",
      searchable: true,
      sortable: true,
    },
    {
      field: "category",
      header: "Category",
      searchable: true,
      sortable: true,
      html: (row) => {
        return `<tk-badge label="${row.category}" ></tk-badge>`;
      },
    },
    {
      field: "quantity",
      header: "Quantity",
      sortable: true,
    },
    {
      field: "-",
      header: "Actions",
      html: (row) => {
        const tkButton: HTMLTkButtonElement =
          document.createElement("tk-button");
        tkButton.label = "Detail";
        tkButton.type = "text";
        tkButton.variant = "info";
        tkButton.addEventListener("tk-click", () => {
          alert("clicked row: " + JSON.stringify(row));
        });
        return tkButton;
      },
    },
  ];
const [data, setData] = useState();
const [totalItem, setTotalItem] = useState();
const [loading, setLoading] = useState(false);

const handleRequest = async (e: TkTableCustomEvent<ITableRequest>) => {
  setLoading(true);
  const result: any = await fetchFromServer(
    e.detail.currentPage,
    e.detail.rowsPerPage,
    e.detail.filters,
    e.detail.sortField,
    e.detail.sortOrder
  );
  setData(result?.data);
  setTotalItem(result?.totalItem);
  setLoading(false);
};

return (
  <TkTable
    columns={column}
    data={data}
    paginationMethod="server"
    rowsPerPage={5}
    totalItems={totalItem}
    loading={loading}
    onTkRequest={handleRequest}
  />
);

Custom Header​

View Code
const column: ITableColumn[] = [
  {
    field: "id",
    header: "Id",
  },
  {
    field: "name",
    header: "Name",
    headerHtml: () => {
      return '<div style="color: red;">Custom Header</div>';
    },
  },
  {
    field: "category",
    header: "Category",
    headerHtml: () => {
      const checkbox = document.createElement('tk-checkbox');
      checkbox.label = 'Checkbox';
      checkbox.addEventListener('tk-change', (e) => {
        console.log('checkbox status', e.detail);
      });
      return checkbox;
    },
  },
  {
    field: "quantity",
    header: "Quantity",
  },
];

return (
  <div style={{ padding: "8px" }}>
    <TkTable columns={column} data={basicData} />
  </div>
);

Header Style​

View Code
const column: ITableColumn[] = [
    {
      field: "id",
      header: "Id",
      style: {
        background: 'var(--primary-base)',
        color: 'white',
      },
    },
    {
      field: "name",
      header: "Name",
      style: {
        background: 'var(--primary-base)',
        color: 'white',
      },
    },
    {
      field: "category",
      header: "Category",
      style: {
        background: '#222530',
        color: 'white',
      },
    },
    {
      field: "quantity",
      header: "Quantity",
      style: {
        background: '#222530',
        color: 'white',
      },
    },
  ];
  
  return (
    <div style={{ padding: "8px" }}>
      <TkTable
        columns={column}
        data={basicData}        
      />
    </div>
  );

Row/Cell Style​

View Code
const column: ITableColumn[] = [
    {
      field: "id",
      header: "Id",
    },
    {
      field: "name",
      header: "Name",
    },
    {
      field: "category",
      header: "Category",
    },
    {
      field: "quantity",
      header: "Quantity",
    },
  ];
  
  return (
    <div style={{ padding: "8px" }}>
      <TkTable
        columns={column}
        data={basicData}
        cellStyle={(row, col) => {
          if (col.field == "name" && row.name == "Blue Band") {
            return { background: "var(--primary-base)", color: "white" };
          }
        }}
        rowStyle={(row, index) => {
          if (row.quantity > 50) {
            return {
              background: "var(--states-success-sub-base)",
              color: "darkgreen",
            };
          }
          if (index % 2 === 0) {
            return {
              background: "var(--states-info-sub-base)",
            };
          }
        }}
      />
    </div>
  );

Expanded Rows​

View Code
const column: ITableColumn[] = [
  {
    expander: true,
    field: "",
    header: "",
  },
  {
    field: "id",
    header: "Id",
  },
  {
    field: "name",
    header: "Name",
  },
  {
    field: "quantity",
    header: "Quantity",
    sortable: true,
    sorter: (a: any, b: any) =>
      Number(a.quantity) > Number(b.quantity) ? 1 : -1,
  },
];
const [expandedRows, setExpandedRows] = useState<any[]>([]);
const handleExpandedRowsChange = (rows: any[]) => {
  console.log(rows);
  setExpandedRows([...rows]);
};
const renderExpandedRows = () => {
  return expandedRows.map((item, index) => {
    return (
      <div slot={`expand-content-${item.id}`} key={"expanded-row-" + index}>
        <div style={{ display: "flex", gap: "8px" }}>content</div>
      </div>
    );
  });
};
return (
  <TkTable
    columns={column}
    data={data}
    dataKey="id"
    paginationMethod="client"
    rowsPerPage={5}
    totalItems={data.length}
    expandedRows={expandedRows}
    onTkExpandedRowsChange={(e) => handleExpandedRowsChange(e.detail)}
  >
    {renderExpandedRows()}
  </TkTable>
);

Export File​

The basic features of the TkTable component are demonstrated.

View Code
const tableRef = useRef<HTMLTkTableElement>(null);

const column: ITableColumn[] = [
  {
    field: "id",
    header: "Id",
  },
  {
    field: "name",
    header: "Name",
  },
  {
    field: "category",
    header: "Category",
  },
  {
    field: "quantity",
    header: "Quantity",
  },
];
const exportOptions = [
  {
    label: "Pdf",
    value: "pdf",
  },
  {
    label: "Excel",
    value: "excel",
  },
  {
    label: "Csv",
    value: "csv",
  },
];
const handleItemClick = (e) => {
  tableRef.current?.exportFile({
    type: e.detail.value,
    fileName: "custom_file_name",
  } as ITableExportOptions);
};
return (
  <div style={{ padding: "8px" }}>
    <TkTable ref={tableRef} columns={column} data={basicData}>
      <div slot="header-right">
        <TkDropdown
          options={exportOptions}
          position="bottom-end"
          onTkItemClick={handleItemClick}
        >
          <TkButton
            slot="trigger"
            label="Export"
            icon="keyboard_arrow_down"
            iconPosition="right"
            type="outlined"
          />
        </TkDropdown>
      </div>
    </TkTable>
  </div>
);

Sticky Column​

This feature allows the selected columns stay in their position in case of having multiple columns that extands the space.

View Code
const tableRef = useRef<HTMLTkTableElement>(null);

const column: ITableColumn[] = [
  {
      field: "id",
      header: "Id",
      fixed: "left",
    },
    {
      field: "name",
      header: "Name",
    },
    {
      field: "category",
      header: "Category",
    },
    {
      field: "quantity",
      header: "Quantity",
    },
    {
      field: "startDate",
      header: "Start Date",
    },
    {
      field: "endDate",
      header: "End Date",
    },
    {
      field: "duration",
      header: "Dration",
    },
    {
      field: "place",
      header: "Place",
    },
    {
      field: "status",
      header: "Status",
      fixed: "right",
    },
];
return (
  <div style={{ padding: "8px" }}>
    <TkTable ref={tableRef} cardTitle="Sticky" columns={column} data={stickyData}>
    </TkTable>
  </div>
);

Column Arrangement​

This feature allows the user to drag and drop the columns to the desired position.

View Code
const [columns, setColumns] = useState<ITableColumn[]>([
    {
      field: 'id',
      header: 'Id',
    },
    {
      field: 'name',
      header: 'Name',
    },
    {
      field: 'category',
      header: 'Category',
    },
    {
      field: 'quantity',
      header: 'Quantity',
    },
  ]);
  const [selectedColumns, setSelectedColumns] = useState<ITableColumn[]>(
    columns.filter((item) => ['id', 'name'].includes(item.field)),
  );

  const handleDragStart = (e: React.DragEvent, index: number) => {
    const parentElement = e.currentTarget.closest('div');
    if (parentElement) {
      e.dataTransfer.setData('text/plain', index.toString());
      parentElement.classList.add('dragging');
      e.dataTransfer.setDragImage(parentElement, 0, 0);
    }
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
  };

  const handleDragEnd = (e: React.DragEvent) => {
    const parentElement = e.currentTarget.closest('div');
    if (parentElement) {
      parentElement.classList.remove('dragging');
    }
  };

  const handleDrop = (e: React.DragEvent, targetIndex: number) => {
    e.preventDefault();
    const sourceIndex = parseInt(e.dataTransfer.getData('text/plain'));
    const newColumns = [...columns];
    const [movedItem] = newColumns.splice(sourceIndex, 1);
    newColumns.splice(targetIndex, 0, movedItem);
    setColumns(newColumns);
    setSelectedColumns(
      newColumns.filter((item) =>
        selectedColumns
          .map((selectedCol) => selectedCol.field)
          .includes(item.field),
      ),
    );
  };
  return (
    <div className="flex flex-col gap-2">
      <TkPopover className="flex justify-end" position="bottom" trigger="click">
        <TkButton
          variant="neutral"
          type="outlined"
          slot="trigger"
          label="Arrange Columns"
        />
        <div slot="content">
          <div className="flex flex-col gap-2">
            {columns.map((col, index) => (
              <div
                key={col.field}
                className="flex justify-between gap-2 py-2 px-3 hover:bg-gray-100 transition-colors"
              >
                <TkCheckbox
                  label={col.header}
                  value={
                    selectedColumns.findIndex(
                      (item) => item.field == col.field,
                    ) > -1
                  }
                  onTkChange={(e) => {
                    if (e.detail) {
                      setSelectedColumns([...selectedColumns, col]);
                    } else {
                      setSelectedColumns(
                        selectedColumns.filter(
                          (item) => item.field != col.field,
                        ),
                      );
                    }
                  }}
                />
                <TkIcon
                  icon="drag_indicator"
                  variant="neutral"
                  draggable
                  onDragStart={(e) => handleDragStart(e, index)}
                  onDragOver={handleDragOver}
                  onDragEnd={handleDragEnd}
                  onDrop={(e) => handleDrop(e, index)}
                  style={{ cursor: 'move' }}
                />
              </div>
            ))}
          </div>
        </div>
      </TkPopover>
      <TkTable columns={selectedColumns} data={data} />
    </div>
  );

Size​

This feature allows the user to use alternative sizes.

View Code
const column: ITableColumn[] = [
  {
    field: "id",
    header: "Id",
  },
  {
    field: "name",
    header: "Name",
  },
  {
    field: "category",
    header: "Category",
  },
  {
    field: "quantity",
    header: "Quantity",
  },
];

return (
  <div style={{ padding: "8px" }}>
    <TkTable columns={column} data={basicData} size="small"/>
  </div>
);

API​

Props​

NameTypeDefaultDescription
string''
(row: any, column: ITableColumn)=>anynullProvides a function to customize cell styles. This function takes the row and column information and returns the style object for a specific cell.
ITableColumn[][]The column definitions (Array of Objects)
anynullThe style attribute of container element
any[][]Rows of data to display
stringnullProperty of each row that defines the unique key of each row
any[][]Specifies which rows are expanded to show additional content.
"basic", "dark", "primary"'basic'Style to apply to header of table
booleannullDisplays a loading indicator while data is being fetched or processed.
booleanfalseEnables multi-column sorting.
stringnullDefines whether pagination is handled on the client or server side.
"grouped", "outlined", "text"'outlined'The type of the pagination
(row: any, index?: number)=>anynullProvides a function to customize row styles. This function takes row information and row index, and returns the style object for a specific row.
number6Number of items per page.
number[]nullNumber of rows per page options
any[]List of the selected
"checkbox", "radio"nullDetermines how rows can be selected, either with radio buttons (single selection) or checkboxes (multiple selection).
FunctionnullA function that returns true if the row should be disabled
"base", "small", "xsmall"'base'Sets size for the component.
booleanfalseEnables or disables alternating row background colors for easier readability.
numbernullNumber of total items.

Events​

NameDescription
tk-cell-editEmitted when a cell is edited.
tk-expanded-rows-changeEmitted when the expanded rows change.
tk-requestEmitted when a request needs to be made to the server.
tk-row-clickEmitted when a row is clicked.
tk-selection-change

Methods​

NameDescription
clearFiltersClears all filters for server side pagination
clearSortingClears all sorting for server side pagination
exportFileExports the table data to a file
getFiltersReturns the current filters
getSortingReturns the current sorting settings
serverRequestAllows tk-request event to be triggered manually
setCurrentPage

Slots​

NameDescription
empty-dataSet how the table will appear when there is no data

Interfaces​

Defines the columns for the table

interface ITableColumn {
  /** Defines the field for the column */
  field: string;
  /** Defines heading for the column */
  header: string;
  /** Defines sub heading for the column */
  subHeader?: string;
  /** Defines width for the column */
  width?: string;
  /** Indicates if the column supports sorting */
  sortable?: boolean;
  /** Custom sort function for the column, mandatory when using client-side sorting. */
  sorter?: Function;
  /** Custom filter function for the column, mandatory when using client-side filtering. */
  filter?: Function;
  /** Indicates if the column is searchable */
  searchable?: boolean;
  /** Indicates if the column is editable */
  editable?: boolean;
  /** Specifies the input type for editable columns */
  inputType?: string;
  /** Indicates if the column contains selection checkboxes */
  selectColumn?: boolean;
  /** Indicates if the column acts as an expander */
  expander?: boolean;
  /** Custom rendering function for HTML content in the column header */
  headerHtml?: Function;
  /** Custom rendering function for HTML content in the column cells */
  html?: Function;
  /** */
  fixed?: 'left' | 'right';
  /** Allows styling to be applied to the th element of the column */
  style?: any;
  /** When true, search and sort icons will only be displayed when hovering over the th element */
  showIconsOnHover?: boolean;
  /** Defines the filter type for this column (text, checkbox or radio) */
  filterType?: 'text' | 'checkbox' | 'radio';
  /** Defines options for checkbox or radio filter type */
  filterOptions?: IFilterOption[];
  /** Defines the label of the buttons */
  filterButtons?: {
    searchButton?: { label?: string };
    cancelButton?: { label?: string };
    selectAllCheckbox?: { label?: string };
  };
  filterElements?: {
    icon?: string;
    searchInput?: { placeholder?: string };
    searchButton?: { label?: string };
    cancelButton?: { label?: string };
    selectAllCheckbox?: { label?: string };
    optionsSearchInput?: { show?: boolean; placeholder?: string };
  };
}

It is the return type of the tkRequest event.

interface ITableRequest {
  /** The current page number */
  currentPage: number;
  /** The total number of pages */
  totalPages: number;
  /** The starting index of the items on the current page */
  startItem: number;
  /** The ending index of the items on the current page */
  endItem: number;
  /** The number of rows per page */
  rowsPerPage: number;
  /** The field by which the table is sorted */
  sortField?: string;
  /** The order of sorting: 'asc' or 'desc' */
  sortOrder?: string;
  /** Array of sort information for multi-sort functionality. When multiple sorts are applied, they are processed in priority order. */
  sorts?: ITableSort[];
  /** A list of filters applied to the table */
  filters: ITableFilter[];
}

It is the return type of the tkCellEdit event.

interface ITableCellEdit {
  /** The unique identifier of the row being edited. Contains the value of the dataKey prop in the edited row */
  rowId: string;
  /** The index of the row being edited */
  rowIndex: number;
  /** The field being edited */
  field: string;
  /** The new value for the field */
  value: string;
}
interface ITableExportOptions {
  /** only works when type is `pdf`. Default value is `vertical` */
  orientation?: 'horizontal' | 'vertical';
  /** */
  fileName?: string;
  /** */
  type?: 'csv' | 'pdf' | 'excel';
  /** `all` working only client side pagination. Default value is `current-page` */
  scope?: 'current-page' | 'selected' | 'all';
  /** Ignore Columns Fields array for only excel export */
  ignoreColumnsFields?: string[];
  /** Columns for only excel export */
  columns?: ITableExportExcelColumn[];
  /** */
  externalData?: any[];
}

Represents a filter applied to a table

interface ITableFilter {
  /** The value of the filter - string for text/radio filter, string array for checkbox filter */
  value?: string | string[];
  /** The field to which the filter is applied */
  field: string;
  /** The type of the filter (text, checkbox or radio) */
  type?: 'text' | 'checkbox' | 'radio';
}

Defines options for checkbox filter

interface IFilterOption {
  /** The value of the option */
  value: string;
  /** The display label of the option */
  label?: string;
}
interface ITableSort {
  /** The field name being sorted */
  field: string;
  /** The sort direction */
  order: 'asc' | 'desc';
}
interface ICustomElement {
  ref: HTMLElement;
  element: HTMLElement;
}
interface ITableExportExcelColumn {
  header: string;
  field: string;
  width: number;
}