dynamic-table-builder/dist/styles.css

A dynamic table library with backend-driven configuration

.dyn-table-container{background-color:#f5f7fa;padding:16px}.dyn-table-container .dyn-table-header{margin-bottom:16px}.dyn-table-container .dyn-table-header .dyn-table-title{font-size:20px;font-weight:500;margin:0}.dyn-table-container .dyn-table-filters{margin-bottom:16px}.dyn-table-container .dyn-table-filters .dyn-table-global-filters-container{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}.dyn-table-container .dyn-table-filters .dyn-table-global-filters-container .dyn-table-global-filters{display:flex;flex:1;flex-wrap:wrap;gap:8px}.dyn-table-container .dyn-table-filters .dyn-table-global-filters-container .dyn-table-global-filters .ant-select:not([class*=dyn-table]){min-width:120px}.dyn-table-container .dyn-table-filters .dyn-table-global-filters-container .dyn-table-global-filters .ant-input:not([class*=dyn-table]){min-width:200px}.dyn-table-container .dyn-table-filters .dyn-table-global-filters-container .dyn-table-global-filters .ant-picker:not([class*=dyn-table]){min-width:220px}.dyn-table-container .dyn-table-actions-container{margin-bottom:16px}.dyn-table-container .dyn-table-actions-container .dyn-table-actions{align-items:center;display:flex;gap:16px;justify-content:space-between}.dyn-table-container .dyn-table-actions-container .dyn-table-actions .dyn-table-left-buttons,.dyn-table-container .dyn-table-actions-container .dyn-table-actions .dyn-table-right-buttons{display:flex;flex-wrap:wrap;gap:8px}.dyn-table-container .dyn-table-status-tag{border-radius:4px;display:inline-block;font-size:12px;line-height:1.5;padding:2px 8px}.dyn-table-container .dyn-table-status-tag.success{background-color:#f6ffed;border:1px solid #b7eb8f;color:#52c41a}.dyn-table-container .dyn-table-status-tag.error{background-color:#fff2f0;border:1px solid #ffccc7;color:#ff4d4f}.dyn-table-container .dyn-table-status-tag.warning{background-color:#fffbe6;border:1px solid #ffe58f;color:#faad14}.dyn-table-container .dyn-table-status-tag.default{background-color:#f5f5f5;border:1px solid #d9d9d9;color:rgba(0,0,0,.65)}.dyn-table-container .dyn-table-button-icon{height:16px;margin-right:8px;width:16px}.dyn-table-container .dyn-table-toolbar{align-items:center;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-bottom:16px}.dyn-table-container .dyn-table-toolbar .dyn-table-action-buttons{display:flex;flex-wrap:wrap;gap:8px}.dyn-table-container .dyn-table-toolbar .ant-btn:not([class*=dyn-table]){align-items:center;border-radius:8px;display:flex;font-weight:500;gap:8px;height:40px;padding:0 16px}.dyn-table-container .dyn-table-toolbar .ant-btn:not([class*=dyn-table]):hover{box-shadow:0 2px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.dyn-table-container .dyn-table-toolbar .ant-btn:not([class*=dyn-table]) .dyn-table-button-icon{height:16px;width:16px}.dyn-table-container .ant-table-wrapper:not([class*=dyn-table]){background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1);overflow:hidden}.dyn-table-container .ant-table-wrapper:not([class*=dyn-table]) .ant-table{background:#fff}.dyn-table-container .ant-table-wrapper:not([class*=dyn-table]) .ant-table .ant-table-thead>tr>th{background:#fafafa;border-bottom:1px solid #f0f0f0;color:#262626;font-weight:600;padding:16px;transition:background .3s ease}.dyn-table-container .ant-table-wrapper:not([class*=dyn-table]) .ant-table .ant-table-thead>tr>th:hover{background:#f0f0f0}.dyn-table-container .ant-table-wrapper:not([class*=dyn-table]) .ant-table .ant-table-thead>tr>th:not(:last-child):after{background:linear-gradient(180deg,transparent,#d9d9d9,transparent);content:"";height:60%;position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px}.dyn-table-container .ant-table-wrapper:not([class*=dyn-table]) .ant-table .ant-table-tbody>tr>td{border-bottom:1px solid #f0f0f0;padding:16px;transition:background .3s ease}.dyn-table-container .ant-table-wrapper:not([class*=dyn-table]) .ant-table .ant-table-tbody>tr>td:not(:last-child):after{background:linear-gradient(180deg,transparent,#f0f0f0,transparent);content:"";height:80%;position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px}.dyn-table-container .ant-table-wrapper:not([class*=dyn-table]) .ant-table .ant-table-tbody>tr:hover>td{background:#f5f7fa}.dyn-table-container .ant-table-wrapper:not([class*=dyn-table]) .ant-table-pagination{border-top:1px solid #f0f0f0;margin:16px;padding:16px 0}.dyn-table-container .ant-table-filter-dropdown:not([class*=dyn-table]){background:#fff;border-radius:8px;box-shadow:0 3px 6px rgba(0,0,0,.15);padding:16px}.dyn-table-container .ant-table-filter-dropdown:not([class*=dyn-table]) .ant-input,.dyn-table-container .ant-table-filter-dropdown:not([class*=dyn-table]) .ant-select{margin-bottom:12px}.dyn-table-container .ant-table-filter-dropdown:not([class*=dyn-table]) .ant-btn{margin-right:8px}@media (max-width:768px){.dyn-table-container .dyn-table-filters .dyn-table-global-filters-container{align-items:stretch;flex-direction:column}.dyn-table-container .dyn-table-actions-container .dyn-table-actions{flex-direction:column;gap:8px}.dyn-table-container .dyn-table-actions-container .dyn-table-actions .dyn-table-left-buttons,.dyn-table-container .dyn-table-actions-container .dyn-table-actions .dyn-table-right-buttons{justify-content:flex-start;width:100%}}