- |
+ |
{!!renderNoData ?
renderNoData :
Not Found
@@ -159,10 +159,6 @@ const Table = ({
* 產生表格內容
*/
const renderHeader = () => {
- if(!isVisibleHeader){
- return null;
- }
-
return ({
* 產生表格內容
*/
const renderBody = () => {
-
-
if(!data || data?.length === 0){
if(isFetching){
- const colSpanStyle = getColSpanStyles(objectKeys(title).length);
+ const colSpan = objectKeys(title).length;
return
- | {renderFetching} |
+ {renderFetching} |
;
}
diff --git a/src/styles.module.scss b/src/styles.module.scss
index ca6d0e8..6acaa92 100644
--- a/src/styles.module.scss
+++ b/src/styles.module.scss
@@ -72,12 +72,12 @@
.root {
table {
thead, tbody, tfoot {
- display: grid;
- grid-template-columns: var(--grid-template);
- grid-template-rows: 1fr;
+ //display: grid;
+ //grid-template-columns: var(--grid-template);
+ //grid-template-rows: 1fr;
}
tr{
- display: contents;
+ //display: contents;
}
}
}
@@ -88,21 +88,24 @@
* Common
* ------------------------------ */
.root table{
+ thead th{
+ width: var(--td-width);
+ max-width: var(--td-width);
+ }
thead th,
tfoot td,
tbody td{
- display: flex;
+ //display: flex;
align-items: center;
justify-content: flex-start;
color: var(--text-color);
font-size: 14px;
-
padding: 0 var(--grid-gap);
- grid-column: auto / span var(--grid-column-span);
- grid-row: auto / span var(--grid-row-span);
+ //grid-column: auto / span var(--grid-column-span);
+ //grid-row: auto / span var(--grid-row-span);
//background-color: var(--bg-color);
@@ -112,25 +115,25 @@
}
&[data-align="left"]{
- justify-content: flex-start;
+ justify-items: flex-start;
text-align: left;
}
&[data-align="center"]{
- justify-content: center;
+ justify-items: center;
text-align: center;
}
&[data-align="right"]{
- justify-content: flex-end;
+ justify-items: flex-end;
text-align: right;
}
&[data-vertical="top"]{
- align-items: flex-start;
+ align-content: flex-start;
}
&[data-vertical="center"]{
- align-items: center;
+ align-content: center;
}
&[data-vertical="bottom"]{
- align-items: flex-end;
+ align-content: flex-end;
}
}
@@ -194,6 +197,11 @@
/** -------------------------------
* Header
* ------------------------------ */
+
+.root:not([data-header]) thead{
+ visibility: collapse;
+}
+
.root table {
thead {
th{
@@ -203,10 +211,11 @@
height: var(--header-line-height, var(--line-height));
- &[data-sort]{
+ .title-sort{
cursor: pointer;
display: flex;
flex-direction: row;
+ align-items: center;
gap: 5px;
.sort-column{
@@ -257,7 +266,7 @@
&[role="button"] td{
cursor: pointer;
}
- &[data-dragging] td{
+ &[data-dragging]{
z-index: 1;
position: relative;
}
@@ -312,10 +321,10 @@
}
tbody {
- display: block;
+ //display: block;
tr {
- display: block;
+ //display: block;
margin-top: 1rem;
height: auto;
background-color: inherit;
@@ -356,7 +365,7 @@
td {
background-color: var(--tr-bg-color);
- display: flex;
+ //display: flex;
text-align: right;
margin-left: auto;
height: var(--cell-line-height, auto);
diff --git a/src/types.ts b/src/types.ts
index 41a1b1a..428c6e9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -22,7 +22,7 @@ export enum ETableMode {
* ------------------------------ */
export type TSizeUnit = 'px' | '%' | 'em' | 'fr' | 'rem';
export type TSizeUnitOrNumber = number|`${number}${TSizeUnit}`;
-export type TTitleCol = true|'auto'|TSizeUnitOrNumber|'min-content'|'max-content'|`minmax(${TSizeUnitOrNumber}, ${TSizeUnitOrNumber})`;
+export type TTitleCol = true|'auto'|TSizeUnitOrNumber;
export interface ITitleField extends IConfig {
diff --git a/src/utils.ts b/src/utils.ts
index 40720af..d82d3dc 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -20,36 +20,28 @@ export const getTemplate = (titles: TTableTitle, gap: strin
return {
- '--grid-template': frs,
+ // '--grid-template': frs,
'--grid-gap': gap
} as CSSProperties;
};
+export const getCol = (col: TTitleCol) => {
+ if(typeof col === 'number'){
+ return {
+ '--td-width': `${col}px`,
+ };
+ }
-/**
- * 產生合併欄位屬性
- * @param colSpan
- */
-export const getColSpanStyles = (colSpan: number) => {
return {
- '--grid-column-span': colSpan > 1 ? colSpan: undefined,
- } as CSSProperties;
-};
+ '--td-width': col ?? undefined,
+ };
-/**
- * 產生合併欄位屬性
- * @param rowSpan
- */
-export const getRowSpanStyles = (rowSpan: number) => {
- return {
- '--grid-row-span': rowSpan > 1 ? rowSpan: undefined,
- '--body-line-height': rowSpan > 1 ? 'auto': undefined,
- } as CSSProperties;
};
+
/**
* 計算 sticky top
* @param isSticky
|