|
@@ -23,6 +23,8 @@ interface Props {
|
|
hasMore: boolean;
|
|
hasMore: boolean;
|
|
isLoadMore?: boolean;
|
|
isLoadMore?: boolean;
|
|
isBackground?: boolean;
|
|
isBackground?: boolean;
|
|
|
|
+ headerClassName?: string;
|
|
|
|
+ bodyClassName?: string;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -54,16 +56,28 @@ const Table: FC<Props> = (props) => {
|
|
threshold = 100,
|
|
threshold = 100,
|
|
isLoadMore = true,
|
|
isLoadMore = true,
|
|
isBackground = false,
|
|
isBackground = false,
|
|
|
|
+ headerClassName,
|
|
|
|
+ bodyClassName,
|
|
} = props;
|
|
} = props;
|
|
|
|
|
|
const cls = clsx(" table-header-group text-[grey] text-[.11rem] ");
|
|
const cls = clsx(" table-header-group text-[grey] text-[.11rem] ");
|
|
|
|
|
|
const bodyCls = clsx(maxHeight ? ` max-h-[${maxHeight}]` : "", "overflow-y-scroll");
|
|
const bodyCls = clsx(maxHeight ? ` max-h-[${maxHeight}]` : "", "overflow-y-scroll");
|
|
|
|
|
|
|
|
+ const hasBackgroundCls = clsx(isBackground && "odd:bg-[#dedede] even:bg-[#d1d1d1] ");
|
|
|
|
+
|
|
const headerTrCls = clsx(
|
|
const headerTrCls = clsx(
|
|
"h-[40px] border-b-1 border-[#e8e8e8]",
|
|
"h-[40px] border-b-1 border-[#e8e8e8]",
|
|
- isBackground && "odd:bg-[#dedede] even:bg-[#d1d1d1] "
|
|
|
|
|
|
+ hasBackgroundCls,
|
|
|
|
+ headerClassName
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ const borderClass = clsx(
|
|
|
|
+ "h-[40px] border-b-1 border-[#e8e8e8] text-center text-[#999]",
|
|
|
|
+ hasBackgroundCls,
|
|
|
|
+ bodyClassName
|
|
);
|
|
);
|
|
|
|
+
|
|
const colGroup = columns.map((item, index) => {
|
|
const colGroup = columns.map((item, index) => {
|
|
return <col key={index} style={{ width: item.width }} />;
|
|
return <col key={index} style={{ width: item.width }} />;
|
|
});
|
|
});
|
|
@@ -86,7 +100,7 @@ const Table: FC<Props> = (props) => {
|
|
<colgroup>{colGroup}</colgroup>
|
|
<colgroup>{colGroup}</colgroup>
|
|
<tbody className={""}>
|
|
<tbody className={""}>
|
|
{dataSource.map((item, index) => (
|
|
{dataSource.map((item, index) => (
|
|
- <tr key={index} className={`${headerTrCls} text-center text-[#999]`}>
|
|
|
|
|
|
+ <tr key={index} className={`${borderClass}`}>
|
|
{columns.map((head, headIndex) => (
|
|
{columns.map((head, headIndex) => (
|
|
<TbodyItem
|
|
<TbodyItem
|
|
index={index + 1}
|
|
index={index + 1}
|