tabulify 1.0.15 → 1.0.17

package/dist/index.cjs.js

@@ -21,13 +21,14 @@ var Table = function (_a) {
     var paginatedData = pagination
         ? dataSource.slice((currentPage - 1) * pageSize, currentPage * pageSize)
         : dataSource;
+    console.log('DEBUG', Boolean(onRowClick));
     return (React.createElement("div", { className: className },
         React.createElement("table", { className: "tabulify-table" },
             React.createElement("thead", { className: "tabulify-head" },
                 React.createElement("tr", null,
                     rowSelection && React.createElement("th", null),
                     columns.map(function (column) { return (React.createElement("th", { className: "tabulify-cell", key: getUniqueId(column.key) }, column.title)); }))),
-            React.createElement("tbody", { className: "tabulify-body" }, paginatedData.map(function (record, index) { return (React.createElement("tr", { key: getUniqueId(record[dataIndex]), onClick: function () { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(record[dataIndex]); } }, columns.map(function (column) { return (React.createElement("td", { className: "tabulify-cell", key: getUniqueId(column.key) }, column.render ? (column.render(record[column.key], record, index)) : (React.createElement(React.Fragment, null, "".concat(record[column.key]))))); }))); }))),
+            React.createElement("tbody", { className: "tabulify-body" }, paginatedData.map(function (record, index) { return (React.createElement("tr", { key: getUniqueId(record[dataIndex]), onClick: function () { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(record[dataIndex]); }, className: Boolean(onRowClick) ? 'has-hover' : '' }, columns.map(function (column) { return (React.createElement("td", { className: "tabulify-cell", key: getUniqueId(column.key) }, column.render ? (column.render(record[column.key], record, index)) : (React.createElement(React.Fragment, null, "".concat(record[column.key]))))); }))); }))),
         pagination && (React.createElement("div", { className: "tabulify-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)); })))));
 };
 

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../src/components/utils.ts","../src/components/Table.tsx"],"sourcesContent":["export const getUniqueId = (prefix: unknown): string =>\n  `${prefix ?? 'id'}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n","import React, { useState } from 'react';\nimport { TableProps } from './Table.types';\nimport { getUniqueId } from './utils';\n\nimport './Table.css';\n\n// Table Component\nconst Table = <T,>({\n  columns,\n  dataSource,\n  rowSelection,\n  pagination,\n  dataIndex,\n  className,\n  onRowClick,\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 className={className}>\n      <table className=\"tabulify-table\">\n        <thead className=\"tabulify-head\">\n          <tr>\n            {rowSelection && <th></th>}\n            {columns.map((column) => (\n              <th className=\"tabulify-cell\" key={getUniqueId(column.key)}>\n                {column.title}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody className=\"tabulify-body\">\n          {paginatedData.map((record, index) => (\n            <tr\n              key={getUniqueId(record[dataIndex])}\n              onClick={() => onRowClick?.(record[dataIndex])}\n            >\n              {columns.map((column) => (\n                <td className=\"tabulify-cell\" key={getUniqueId(column.key)}>\n                  {column.render ? (\n                    column.render(record[column.key], record, index)\n                  ) : (\n                    <>{`${record[column.key]}`}</>\n                  )}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      {pagination && (\n        <div className=\"tabulify-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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"}
+{"version":3,"file":"index.cjs.js","sources":["../src/utils/index.ts","../src/components/Table/index.tsx"],"sourcesContent":["export const getUniqueId = (prefix: unknown): string =>\n  `${prefix ?? 'id'}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n","import React, { useState } from 'react';\nimport { TableProps } from '../../types';\nimport { getUniqueId } from '../../utils';\n\n// Table Component\nconst Table = <T,>({\n  columns,\n  dataSource,\n  rowSelection,\n  pagination,\n  dataIndex,\n  className,\n  onRowClick,\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  console.log('DEBUG', Boolean(onRowClick));\n\n  return (\n    <div className={className}>\n      <table className=\"tabulify-table\">\n        <thead className=\"tabulify-head\">\n          <tr>\n            {rowSelection && <th></th>}\n            {columns.map((column) => (\n              <th className=\"tabulify-cell\" key={getUniqueId(column.key)}>\n                {column.title}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody className=\"tabulify-body\">\n          {paginatedData.map((record, index) => (\n            <tr\n              key={getUniqueId(record[dataIndex])}\n              onClick={() => onRowClick?.(record[dataIndex])}\n              className={Boolean(onRowClick) ? 'has-hover' : ''}\n            >\n              {columns.map((column) => (\n                <td className=\"tabulify-cell\" key={getUniqueId(column.key)}>\n                  {column.render ? (\n                    column.render(record[column.key], record, index)\n                  ) : (\n                    <>{`${record[column.key]}`}</>\n                  )}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      {pagination && (\n        <div className=\"tabulify-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

@@ -19,13 +19,14 @@ var Table = function (_a) {
     var paginatedData = pagination
         ? dataSource.slice((currentPage - 1) * pageSize, currentPage * pageSize)
         : dataSource;
+    console.log('DEBUG', Boolean(onRowClick));
     return (React.createElement("div", { className: className },
         React.createElement("table", { className: "tabulify-table" },
             React.createElement("thead", { className: "tabulify-head" },
                 React.createElement("tr", null,
                     rowSelection && React.createElement("th", null),
                     columns.map(function (column) { return (React.createElement("th", { className: "tabulify-cell", key: getUniqueId(column.key) }, column.title)); }))),
-            React.createElement("tbody", { className: "tabulify-body" }, paginatedData.map(function (record, index) { return (React.createElement("tr", { key: getUniqueId(record[dataIndex]), onClick: function () { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(record[dataIndex]); } }, columns.map(function (column) { return (React.createElement("td", { className: "tabulify-cell", key: getUniqueId(column.key) }, column.render ? (column.render(record[column.key], record, index)) : (React.createElement(React.Fragment, null, "".concat(record[column.key]))))); }))); }))),
+            React.createElement("tbody", { className: "tabulify-body" }, paginatedData.map(function (record, index) { return (React.createElement("tr", { key: getUniqueId(record[dataIndex]), onClick: function () { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(record[dataIndex]); }, className: Boolean(onRowClick) ? 'has-hover' : '' }, columns.map(function (column) { return (React.createElement("td", { className: "tabulify-cell", key: getUniqueId(column.key) }, column.render ? (column.render(record[column.key], record, index)) : (React.createElement(React.Fragment, null, "".concat(record[column.key]))))); }))); }))),
         pagination && (React.createElement("div", { className: "tabulify-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)); })))));
 };
 

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/components/utils.ts","../src/components/Table.tsx"],"sourcesContent":["export const getUniqueId = (prefix: unknown): string =>\n  `${prefix ?? 'id'}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n","import React, { useState } from 'react';\nimport { TableProps } from './Table.types';\nimport { getUniqueId } from './utils';\n\nimport './Table.css';\n\n// Table Component\nconst Table = <T,>({\n  columns,\n  dataSource,\n  rowSelection,\n  pagination,\n  dataIndex,\n  className,\n  onRowClick,\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 className={className}>\n      <table className=\"tabulify-table\">\n        <thead className=\"tabulify-head\">\n          <tr>\n            {rowSelection && <th></th>}\n            {columns.map((column) => (\n              <th className=\"tabulify-cell\" key={getUniqueId(column.key)}>\n                {column.title}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody className=\"tabulify-body\">\n          {paginatedData.map((record, index) => (\n            <tr\n              key={getUniqueId(record[dataIndex])}\n              onClick={() => onRowClick?.(record[dataIndex])}\n            >\n              {columns.map((column) => (\n                <td className=\"tabulify-cell\" key={getUniqueId(column.key)}>\n                  {column.render ? (\n                    column.render(record[column.key], record, index)\n                  ) : (\n                    <>{`${record[column.key]}`}</>\n                  )}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      {pagination && (\n        <div className=\"tabulify-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":";;AAAO,IAAM,WAAW,GAAG,UAAC,MAAe,EAAA;AACzC,IAAA,OAAA,EAAG,CAAA,MAAA,CAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,KAAA,CAAA,GAAA,MAAM,GAAI,IAAI,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,IAAI,CAAC,GAAG,EAAE,EAAI,GAAA,CAAA,CAAA,MAAA,CAAA,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAE;AAA/E,CAA+E;;ACKjF;AACM,IAAA,KAAK,GAAG,UAAK,EAQH,EAAA;AAPd,IAAA,IAAA,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,YAAY,kBAAA,EACZ,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA;IAEJ,IAAA,EAAA,GAAgC,QAAQ,CAAC,CAAA,UAAU,KAAV,IAAA,IAAA,UAAU,uBAAV,UAAU,CAAE,OAAO,KAAI,CAAC,CAAC,EAAjE,WAAW,QAAA,EAAE,cAAc,QAAsC;AAExE,IAAA,IAAM,QAAQ,GAAG,CAAA,UAAU,aAAV,UAAU,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAV,UAAU,CAAE,QAAQ,KAAI,UAAU,CAAC,MAAM;;IAG1D,IAAM,gBAAgB,GAAG,UAAC,IAAY,EAAA;;QACpC,cAAc,CAAC,IAAI,CAAC;QACpB,CAAA,EAAA,GAAA,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAU,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,EAAG,IAAI,CAAC;AAC9B,KAAC;;IAGD,IAAM,aAAa,GAAG;AACpB,UAAE,UAAU,CAAC,KAAK,CAAC,CAAC,WAAW,GAAG,CAAC,IAAI,QAAQ,EAAE,WAAW,GAAG,QAAQ;UACrE,UAAU;AAEd,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,EAAA;QACvB,KAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA;YAC/B,KAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAAA;AAC9B,gBAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA;AACG,oBAAA,YAAY,IAAI,KAAS,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,CAAA;AACzB,oBAAA,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAA,EAAK,QACvB,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,IACvD,MAAM,CAAC,KAAK,CACV,EACN,EAAA,CAAC,CACC,CACC;YACR,KAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAC7B,EAAA,aAAa,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK,EAAA,EAAK,QACpC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EACnC,OAAO,EAAE,cAAM,OAAA,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAU,CAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAA/B,EAA+B,IAE7C,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAK,EAAA,QACvB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,EAAA,EACvD,MAAM,CAAC,MAAM,IACZ,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,KAEhD,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAG,EAAG,CAAA,MAAA,CAAA,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAE,CAAI,CAC/B,CACE,EACN,EAAA,CAAC,CACC,EAd+B,EAerC,CAAC,CACI,CACF;AACP,QAAA,UAAU,KACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,IACjC,KAAK,CAAC,IAAI,CACT,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,QAAQ,CAAC,EAAE,EAClD,UAAC,CAAC,EAAE,CAAC,EAAA,EAAK,OAAA,CAAC,GAAG,CAAC,CAAL,EAAK,CAChB,CAAC,GAAG,CAAC,UAAC,IAAI,EAAK,EAAA,QACd,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,IAAI,EACT,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,QAAQ,GAAG,EAAE,EAC/C,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,IAAI,CAAC,GAAA,EAAA,EAEpC,IAAI,CACE,IACV,CAAC,CACE,CACP,CACG;AAEV;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../src/utils/index.ts","../src/components/Table/index.tsx"],"sourcesContent":["export const getUniqueId = (prefix: unknown): string =>\n  `${prefix ?? 'id'}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n","import React, { useState } from 'react';\nimport { TableProps } from '../../types';\nimport { getUniqueId } from '../../utils';\n\n// Table Component\nconst Table = <T,>({\n  columns,\n  dataSource,\n  rowSelection,\n  pagination,\n  dataIndex,\n  className,\n  onRowClick,\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  console.log('DEBUG', Boolean(onRowClick));\n\n  return (\n    <div className={className}>\n      <table className=\"tabulify-table\">\n        <thead className=\"tabulify-head\">\n          <tr>\n            {rowSelection && <th></th>}\n            {columns.map((column) => (\n              <th className=\"tabulify-cell\" key={getUniqueId(column.key)}>\n                {column.title}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody className=\"tabulify-body\">\n          {paginatedData.map((record, index) => (\n            <tr\n              key={getUniqueId(record[dataIndex])}\n              onClick={() => onRowClick?.(record[dataIndex])}\n              className={Boolean(onRowClick) ? 'has-hover' : ''}\n            >\n              {columns.map((column) => (\n                <td className=\"tabulify-cell\" key={getUniqueId(column.key)}>\n                  {column.render ? (\n                    column.render(record[column.key], record, index)\n                  ) : (\n                    <>{`${record[column.key]}`}</>\n                  )}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      {pagination && (\n        <div className=\"tabulify-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/Pagination/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface PaginationProps {
+    pageSize: number;
+    total: number;
+    currentPage: number;
+    onPageChange: (page: number) => void;
+}
+declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TableProps } from '../../types';
+declare const Table: <T>({ columns, dataSource, rowSelection, pagination, dataIndex, className, onRowClick, }: TableProps<T>) => React.JSX.Element;
+export default Table;

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

@@ -1,5 +1,5 @@
+import './styles.css';
 import React from 'react';
 import { TableProps } from './Table.types';
-import './Table.css';
 declare const Table: <T>({ columns, dataSource, rowSelection, pagination, dataIndex, className, onRowClick, }: TableProps<T>) => React.JSX.Element;
 export default Table;

package/dist/types/index.d.ts

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

package/dist/types/types/index.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface Column<T, K extends keyof T = keyof T> {
+    title: string;
+    key: K;
+    sorter?: (a: T, b: T) => number;
+    render?: (value: T[K], 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> {
+    className?: string;
+    columns: Column<T>[];
+    dataSource: T[];
+    dataIndex: keyof T;
+    rowSelection?: RowSelection<T>;
+    pagination?: Pagination;
+    onRowClick?: (id: T[keyof T]) => void;
+}

package/dist/types/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const getUniqueId: (prefix: unknown) => string;

package/package.json

@@ -1,13 +1,11 @@
 {
   "name": "tabulify",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "type": "module",
   "description": "A lightweight and customizable React table component.",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/types/index.d.ts",
   "scripts": {
     "build": "rollup -c",
+    "watch": "rollup -c --watch",
     "prepublishOnly": "npm run build",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -63,5 +61,12 @@
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3"
-  }
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
+  "style": "dist/index.cjs.css"
 }

package/.eslintrc.json

@@ -1,34 +0,0 @@
-{
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "airbnb",
-    "plugin:prettier/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["react", "@typescript-eslint"],
-  "rules": {
-    "react/react-in-jsx-scope": "off",
-    "react/prop-types": "off",
-    "no-unused-vars": "warn",
-    "@typescript-eslint/no-unused-vars": ["warn"],
-    "jsx-a11y/anchor-is-valid": "off"
-  }
-}

package/.prettierrc

@@ -1,6 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": true,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}

package/eslint.config.mjs

@@ -1,14 +0,0 @@
-import globals from "globals";
-import pluginJs from "@eslint/js";
-import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
-
-
-/** @type {import('eslint').Linter.Config[]} */
-export default [
-  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
-  {languageOptions: { globals: globals.browser }},
-  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  pluginReact.configs.flat.recommended,
-];

package/jest.config.ts

@@ -1,10 +0,0 @@
-import type { Config } from 'jest';
-
-const config: Config = {
-  preset: 'ts-jest',
-  testEnvironment: 'jest-environment-jsdom',
-  testMatch: ['**/*.test.ts', '**/*.test.tsx'], // Match test files
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], // Resolve these extensions
-};
-
-export default config;