tabulify 1.0.3 → 1.0.4

package/dist/index.cjs.js

@@ -1,3 +1,33 @@
 'use strict';
 
+var React = require('react');
+
+// Table Component
+var Table = function (_a) {
+    var columns = _a.columns, dataSource = _a.dataSource, rowSelection = _a.rowSelection, pagination = _a.pagination;
+    var _b = React.useState((pagination === null || pagination === void 0 ? void 0 : pagination.current) || 1), currentPage = _b[0], setCurrentPage = _b[1];
+    var pageSize = (pagination === null || pagination === void 0 ? void 0 : pagination.pageSize) || dataSource.length;
+    // Handle pagination
+    var handlePageChange = function (page) {
+        var _a;
+        setCurrentPage(page);
+        (_a = pagination === null || pagination === void 0 ? void 0 : pagination.onChange) === null || _a === void 0 ? void 0 : _a.call(pagination, page);
+    };
+    // Paginate data
+    var paginatedData = pagination
+        ? dataSource.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+        : dataSource;
+    return (React.createElement("div", null,
+        React.createElement("table", null,
+            React.createElement("thead", null,
+                React.createElement("tr", null,
+                    rowSelection && React.createElement("th", null),
+                    columns.map(function (column) { return (React.createElement("th", { key: column.key }, column.title)); }))),
+            React.createElement("tbody", null, paginatedData.map(function (record, index) { return (React.createElement("tr", { key: record.key }, columns.map(function (column) { return (React.createElement("td", { key: column.key }, column.render
+                ? column.render(record[column.dataIndex], record, index)
+                : record[column.dataIndex])); }))); }))),
+        pagination && (React.createElement("div", { className: "pagination" }, Array.from({ length: Math.ceil(pagination.total / pageSize) }, function (_, i) { return i + 1; }).map(function (page) { return (React.createElement("button", { key: page, className: currentPage === page ? 'active' : '', onClick: function () { return handlePageChange(page); } }, page)); })))));
+};
+
+exports.Table = Table;
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.cjs.js","sources":["../src/components/Table.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { TableProps } from './Table.types';\n\n// Table Component\nconst Table = <T extends { key: React.Key }>({\n  columns,\n  dataSource,\n  rowSelection,\n  pagination,\n}: TableProps<T>) => {\n  const [currentPage, setCurrentPage] = useState(pagination?.current || 1);\n\n  const pageSize = pagination?.pageSize || dataSource.length;\n\n  // Handle pagination\n  const handlePageChange = (page: number) => {\n    setCurrentPage(page);\n    pagination?.onChange?.(page);\n  };\n\n  // Paginate data\n  const paginatedData = pagination\n    ? dataSource.slice((currentPage - 1) * pageSize, currentPage * pageSize)\n    : dataSource;\n\n  return (\n    <div>\n      <table>\n        <thead>\n          <tr>\n            {rowSelection && <th></th>}\n            {columns.map((column) => (\n              <th key={column.key}>{column.title}</th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {paginatedData.map((record, index) => (\n            <tr key={record.key}>\n              {columns.map((column) => (\n                <td key={column.key}>\n                  {column.render\n                    ? column.render(record[column.dataIndex], record, index)\n                    : (record[column.dataIndex] as React.ReactNode)}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      {pagination && (\n        <div className=\"pagination\">\n          {Array.from(\n            { length: Math.ceil(pagination.total / pageSize) },\n            (_, i) => i + 1\n          ).map((page) => (\n            <button\n              key={page}\n              className={currentPage === page ? 'active' : ''}\n              onClick={() => handlePageChange(page)}\n            >\n              {page}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Table;\n"],"names":["useState"],"mappings":"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"}

package/dist/index.esm.js

@@ -1,2 +1,31 @@
+import React, { useState } from 'react';
 
+// Table Component
+var Table = function (_a) {
+    var columns = _a.columns, dataSource = _a.dataSource, rowSelection = _a.rowSelection, pagination = _a.pagination;
+    var _b = useState((pagination === null || pagination === void 0 ? void 0 : pagination.current) || 1), currentPage = _b[0], setCurrentPage = _b[1];
+    var pageSize = (pagination === null || pagination === void 0 ? void 0 : pagination.pageSize) || dataSource.length;
+    // Handle pagination
+    var handlePageChange = function (page) {
+        var _a;
+        setCurrentPage(page);
+        (_a = pagination === null || pagination === void 0 ? void 0 : pagination.onChange) === null || _a === void 0 ? void 0 : _a.call(pagination, page);
+    };
+    // Paginate data
+    var paginatedData = pagination
+        ? dataSource.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+        : dataSource;
+    return (React.createElement("div", null,
+        React.createElement("table", null,
+            React.createElement("thead", null,
+                React.createElement("tr", null,
+                    rowSelection && React.createElement("th", null),
+                    columns.map(function (column) { return (React.createElement("th", { key: column.key }, column.title)); }))),
+            React.createElement("tbody", null, paginatedData.map(function (record, index) { return (React.createElement("tr", { key: record.key }, columns.map(function (column) { return (React.createElement("td", { key: column.key }, column.render
+                ? column.render(record[column.dataIndex], record, index)
+                : record[column.dataIndex])); }))); }))),
+        pagination && (React.createElement("div", { className: "pagination" }, Array.from({ length: Math.ceil(pagination.total / pageSize) }, function (_, i) { return i + 1; }).map(function (page) { return (React.createElement("button", { key: page, className: currentPage === page ? 'active' : '', onClick: function () { return handlePageChange(page); } }, page)); })))));
+};
+
+export { Table };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.esm.js","sources":["../src/components/Table.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { TableProps } from './Table.types';\n\n// Table Component\nconst Table = <T extends { key: React.Key }>({\n  columns,\n  dataSource,\n  rowSelection,\n  pagination,\n}: TableProps<T>) => {\n  const [currentPage, setCurrentPage] = useState(pagination?.current || 1);\n\n  const pageSize = pagination?.pageSize || dataSource.length;\n\n  // Handle pagination\n  const handlePageChange = (page: number) => {\n    setCurrentPage(page);\n    pagination?.onChange?.(page);\n  };\n\n  // Paginate data\n  const paginatedData = pagination\n    ? dataSource.slice((currentPage - 1) * pageSize, currentPage * pageSize)\n    : dataSource;\n\n  return (\n    <div>\n      <table>\n        <thead>\n          <tr>\n            {rowSelection && <th></th>}\n            {columns.map((column) => (\n              <th key={column.key}>{column.title}</th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {paginatedData.map((record, index) => (\n            <tr key={record.key}>\n              {columns.map((column) => (\n                <td key={column.key}>\n                  {column.render\n                    ? column.render(record[column.dataIndex], record, index)\n                    : (record[column.dataIndex] as React.ReactNode)}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      {pagination && (\n        <div className=\"pagination\">\n          {Array.from(\n            { length: Math.ceil(pagination.total / pageSize) },\n            (_, i) => i + 1\n          ).map((page) => (\n            <button\n              key={page}\n              className={currentPage === page ? 'active' : ''}\n              onClick={() => handlePageChange(page)}\n            >\n              {page}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Table;\n"],"names":[],"mappings":"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"}

package/dist/types/components/Table.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TableProps } from './types';
+import { TableProps } from './Table.types';
 declare const Table: <T extends {
     key: React.Key;
-}>({ columns, dataSource, rowSelection, pagination, }: TableProps<T>) => any;
+}>({ columns, dataSource, rowSelection, pagination, }: TableProps<T>) => React.JSX.Element;
 export default Table;

package/dist/types/components/Table.types.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface Column<T> {
+    title: string;
+    dataIndex: keyof T;
+    key: string;
+    sorter?: (a: T, b: T) => number;
+    render?: (value: T[keyof T], record: T, index: number) => React.ReactNode;
+}
+export interface RowSelection<T> {
+    type: 'checkbox' | 'radio';
+    selectedRowKeys?: (keyof T)[];
+    onChange?: (selectedRowKeys: (keyof T)[], selectedRows: T[]) => void;
+}
+export interface Pagination {
+    pageSize: number;
+    total: number;
+    current?: number;
+    onChange?: (page: number) => void;
+}
+export interface TableProps<T extends {
+    key: React.Key;
+}> {
+    columns: Column<T>[];
+    dataSource: T[];
+    rowSelection?: RowSelection<T>;
+    pagination?: Pagination;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Table } from './components/Table';
+export type { TableProps, Column, Pagination, RowSelection, } from './components/Table.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabulify",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "description": "A lightweight and customizable React table component.",
   "main": "dist/index.js",
@@ -46,6 +46,7 @@
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
     "eslint": "^9.15.0",