add isCollapseDetail prop to support collapsing row details in tables

Author: imagine10255

example/src/components/primary/Table/Table.stories.tsx

@@ -241,6 +241,7 @@ export const WithRowSpanField: Story = {
 
 export const WithDetail: Story = {
     args: {
+        isCollapseDetail: true,
         title: {
             plus: {text: '#', col: 40,   titleAlign: 'center', dataAlign: 'center'},
             ...baseData.title,
@@ -273,7 +274,41 @@ export const WithDetail: Story = {
     }
 };
 
-export const WithClickRow: Story = {
+export const WithDetailClickCol: Story = {
+    args: {
+        title: {
+            plus: {text: '#', col: 40,   titleAlign: 'center', dataAlign: 'center'},
+            ...baseData.title,
+        },
+        data: baseData.data.map(row => {
+            return {
+                ...row,
+                detail:  [
+                    {
+                        plus: {colSpan: 4, className: 'detail-css', value: <div style={{color: '#000', fontWeight: 700}}>Fax</div>},
+                        amount: {dataAlign: 'right', value: 10},
+                    },
+                    {
+                        plus: {colSpan: 4, value: <div style={{color: '#000', fontWeight: 700}}>Total</div>},
+                        amount: {value: calcAmount(paginateData), dataAlign: 'right'},
+                    }
+                ],
+                field: {
+                    ...row.field,
+                    plus: (args) => <CollapseButton
+                        type="button"
+                        onClick={args.collapse}
+                        data-active={args.isActive ? '':undefined}
+                    >
+                        {args.isActive ? '-': '+'}
+                    </CollapseButton>,
+                }
+            };
+        })
+    }
+};
+
+export const WithDetailClickRow: Story = {
     args: {
         ...baseData,
         data: baseData.data.map(row => {

src/Body/Body.tsx

@@ -43,6 +43,7 @@ interface IProps<K extends TBodyDataFieldKey, I extends TBodyDataID> {
     isEnableDragSortable?: boolean
     onChangeSortable?: TOnChangeSortable
     onHover?: (id: I) => void
+    isCollapseDetail?: boolean
 }
 
 
@@ -55,6 +56,7 @@ const Body = <K extends TBodyDataFieldKey, I extends TBodyDataID>({
     tableMode,
     isEnableDragSortable,
     onChangeSortable,
+    isCollapseDetail,
 }: IProps<K, I>) => {
     const items = useMemo<I[]>(() => {
         return data?.map(row => row.id) ?? [];
@@ -164,6 +166,7 @@ const Body = <K extends TBodyDataFieldKey, I extends TBodyDataID>({
             let cellTdIndex = 0;
 
 
+            const isCollapse = isCollapseDetail || collapseIds?.includes(dataRow.id);
 
 
             const titleKeys = objectKeys(title);
@@ -203,7 +206,7 @@ const Body = <K extends TBodyDataFieldKey, I extends TBodyDataID>({
                     const nthType = cellTdIndex % 2 === 0 ? 'odd': 'even';
 
 
-                    const children = getBodyData(field, collapseIds.includes(dataRow.id), collapseEvent);
+                    const children = getBodyData(field, isCollapse, collapseEvent);
 
                     const stickyLeftStyles = getCalcStickyLeftStyles(fieldConfig.sticky === 'left' ? stickyLeft.widths: stickyRight.widths, fieldConfig.sticky);
 
@@ -234,7 +237,6 @@ const Body = <K extends TBodyDataFieldKey, I extends TBodyDataID>({
                 }, []);
 
 
-            const isCollapse = collapseIds?.includes(dataRow.id);
 
             return (<React.Fragment
                 key={dataRow.id}

src/Body/BodyDetail.tsx

@@ -21,11 +21,6 @@ interface IProps <K extends TBodyDataFieldKey>{
 
 
 
-
-
-
-
-
 /**
  * Table Body Detail
  * 額外顯示資訊 例如 詳細

src/Table.tsx

@@ -59,6 +59,7 @@ const Table = <I extends TBodyDataID, K extends TBodyDataFieldKey>({
     isVisiblePagePicker = true,
     isVisiblePageLimit = true,
     isVisiblePageInfo = true,
+    isCollapseDetail = false,
 }: ITableProps<I, K>) => {
     const [tableMode, setTableMode] = useState<ETableMode>(ETableMode.table);
 
@@ -192,6 +193,7 @@ const Table = <I extends TBodyDataID, K extends TBodyDataFieldKey>({
             tableMode={tableMode}
             title={title}
             data={data}
+            isCollapseDetail={isCollapseDetail}
             isEnableDragSortable={isEnableDragSortable}
             onChangeSortable={onChangeSortable}
         />;