= memo((props) => {
+ const trRef = useRef();
+ let { row, handleDrag, handleDrop } = props;
+
+ const renderCell = (cell: any) => {
+ switch (cell.column.columnDef.accessorKey) {
+ case 'action':
+ return (
+ (e.preventDefault(), handleDrop(row.index))}
+ onDragOver={(e) => e.preventDefault()}
+ >
+
+ {
+ // console.log(e, trRef);
+ // const td = trRef.current.firstChild;
+ // console.log(td, td.contains(e.target))
+ // if(!td.contains(e.target)) e.preventDefault();
+ // else handleDrag(row.index);
+ handleDrag(row.index);
+ }}
+ className="flex"
+ >
+
+
+
+
+
+ |
+ );
+ // case 'remove':
+ // return (
+ //
+ //
+ //
+ //
+ // |
+ // );
+ default:
+ return flexRender(cell.column.columnDef.cell, cell.getContext());
+ }
+ };
+
+ return (
+
+ {row.getVisibleCells().map((cell: TPlainObject) => {
+ return {renderCell(cell)};
+ })}
+
+ );
+});
diff --git a/packages/ui-kit/src/components/table/table/TableData.tsx b/packages/ui-kit/src/components/table/table/TableData.tsx
index aca20b63b..513db2545 100644
--- a/packages/ui-kit/src/components/table/table/TableData.tsx
+++ b/packages/ui-kit/src/components/table/table/TableData.tsx
@@ -1,38 +1,26 @@
-import { Td, TPlainObject } from './Table';
-import { useEffect, useState } from 'react';
-
-export type Person = {
+export type FormData = {
key: string;
value: string;
description: string;
- popularPlace: string;
- pincode: number;
+ disable?: boolean;
};
-export const defaultData: Person[] = [
+export const defaultData: FormData[] = [
{
- key: 'City 1',
- value: 'Ahmedabad',
- description:
- 'Ahmedabad, in western India, is the largest city in the state of Gujarat. ',
- popularPlace: 'Kankaria Lake',
- pincode: 380001,
+ key: 'name',
+ value: 'Elon',
+ description: 'The name of user',
+ disable: true,
},
{
- key: 'City 2',
- value: 'Surat',
- description:
- 'Surat is a large city beside the Tapi River in the west Indian state of Gujarat',
- popularPlace: 'Dumas Beach',
- pincode: 395003,
+ key: 'startup',
+ value: 'SpaceX',
+ description: 'The space company',
},
{
- key: 'City 3',
- value: 'Mahemdavad',
- description:
- 'Mahemdavad is a town with municipality in the Kheda district in the Indian state of Gujarat',
- popularPlace: 'Siddhivinayak Temple',
- pincode: 387130,
+ key: 'founded',
+ value: '2004',
+ description: 'The year of founded',
},
];
@@ -40,38 +28,6 @@ export function getData() {
return defaultData;
}
-//For keeping column as static - provide minSize & width without resizing param
-export const columnDataForDisplay = [
- {
- name: 'action',
- displayName: ' ',
- minSize: 64,
- width: 64,
- },
- {
- name: 'value',
- displayName: 'City',
- minSize: 145,
- enableResizing: true,
- },
- {
- name: 'description',
- displayName: 'Description',
- minSize: 145,
- enableResizing: true,
- },
- {
- name: 'popularPlace',
- displayName: 'Location',
- enableResizing: true,
- },
- {
- name: 'pincode',
- minSize: 60,
- displayName: 'Area Code',
- },
-];
-
export const headerRow = {
description: 'Description',
disable: false,
@@ -104,40 +60,3 @@ export const headerColumnDataForDisplay = [
minSize: 145,
},
];
-
-export const TableColumnHeading = ({ heading }: TPlainObject) => {
- return <>{heading}>;
-};
-export const TableInput = (props: any) => {
- let { onChange, autoFocus, cell, rows } = props;
- const [inputValue, setInputValue] = useState(cell.cellValue);
-
- return (
-
- {
- setInputValue(e.target.value);
- }}
- onBlur={(e) => {
- let updatedRow = Object.assign([], rows);
- updatedRow[cell.rowIndex] = {
- ...updatedRow[cell.rowIndex],
- [cell.columnId]: e.target.value,
- };
- onChange(updatedRow);
- }}
- className="text-appForeground bg-appBackground h-[29px] w-full
- absolute top-0 left-0 !border-0 p-1 text-base overflow-ellipsis focus:!border-0"
- />
- |
- );
-};
diff --git a/packages/ui-kit/src/components/table/table/TableDraggableRow.tsx b/packages/ui-kit/src/components/table/table/TableDraggableRow.tsx
index c3ac90439..e69de29bb 100644
--- a/packages/ui-kit/src/components/table/table/TableDraggableRow.tsx
+++ b/packages/ui-kit/src/components/table/table/TableDraggableRow.tsx
@@ -1,38 +0,0 @@
-import { flexRender, Row } from '@tanstack/react-table';
-import { FC, Fragment } from 'react';
-import { GrDrag } from '@react-icons/all-files/gr/GrDrag';
-import { ITableRow, TPlainObject } from './Table';
-
-const TableDraggableRow: FC = (props) => {
- let { row, handleDrag, handleDrop } = props;
-
- return (
- handleDrag(row.index)}
- draggable={true}
- >
- {row.getVisibleCells().map((cell: TPlainObject) => {
- return (
-
- {cell.column.columnDef.accessorKey === 'action' ? (
- (e.preventDefault(), handleDrop(row.index))}
- onDragOver={(e) => e.preventDefault()}
- >
-
- |
- ) : (
- flexRender(cell.column.columnDef.cell, cell.getContext())
- )}
-
- );
- })}
-
- );
-};
-
-export default TableDraggableRow;
diff --git a/packages/ui-kit/src/components/url/components/Url.tsx b/packages/ui-kit/src/components/url/components/Url.tsx
index 7c62f8f77..152cc9273 100644
--- a/packages/ui-kit/src/components/url/components/Url.tsx
+++ b/packages/ui-kit/src/components/url/components/Url.tsx
@@ -18,6 +18,8 @@ const Url: FC = ({
= ({
}}
className="without-border without-padding"
height={21}
- path={id}
type="text"
onEnter={onEnter}
onPaste={onPaste}
diff --git a/packages/ui-kit/src/stories/page.css b/packages/ui-kit/src/stories/page.css
index 51c9d099a..cdb02cbf7 100644
--- a/packages/ui-kit/src/stories/page.css
+++ b/packages/ui-kit/src/stories/page.css
@@ -1,4 +1,4 @@
-section {
+/* section {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 24px;
@@ -66,4 +66,4 @@ li {
.tip-wrapper svg path {
fill: #1ea7fd;
-}
+} */
diff --git a/packages/ui-kit/src/ui-kit.ts b/packages/ui-kit/src/ui-kit.ts
index a66e56ad1..d0ed07043 100644
--- a/packages/ui-kit/src/ui-kit.ts
+++ b/packages/ui-kit/src/ui-kit.ts
@@ -78,7 +78,7 @@ export { default as PrimaryIFT } from './components/table/primary-ift/PrimaryIFT
export { default as MultipartIFT } from './components/table/multipart-ift/MultipartIFT';
export { default as BulkEditIFT } from './components/table/bulk-edit-ift/BulkEditIFT';
export { default as IFT } from './components/table/ift/IFT';
-export { default as SmartJSONTable } from './components/smart-json-table/SmartJSONTable';
+export { default as BasicTable } from './components/table/table/BasicTable';
//table v3
export { default as PrimaryTable } from './components/table-v3/primary-table/PrimaryTable';