react-flexible-table/dist/index.css

A highly customizable and flexible table component for React

.custom-select-wrapper{max-width:100%;position:relative;width:100%}.custom-select{align-items:center;background-color:#f8f9fa;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");background-position:right 1rem center;background-repeat:no-repeat;background-size:16px 12px;border:1px solid #f8f9fa;border-radius:1rem;box-shadow:inset 0 1px 2px rgba(0,0,0,.075);color:#323232;cursor:pointer;display:flex;font-size:1rem;font-weight:400;justify-content:space-between;padding:1rem;width:100%}.custom-select__is-invalid{border-color:red!important;padding-right:calc(1.5em + 1rem)!important}.custom-select:focus{box-shadow:0 0 2px 4px rgba(58,43,159,.2);outline:none}.custom-select__trigger{-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;padding-left:0;padding-right:24px;text-overflow:ellipsis;width:100%}.custom-placeholder{background-color:transparent;color:#6c757d;padding-right:26px}.custom-select.disabled{background-color:#f9f9f9;border-color:#ddd;cursor:not-allowed}.custom-options{-ms-overflow-style:none;background-color:#fff;border:1px solid #ccc;border-radius:1rem;box-shadow:0 4px 6px rgba(0,0,0,.1);display:none;left:0;max-height:200px;overflow-y:auto;position:absolute;right:0;scrollbar-width:none;top:100%;z-index:100}.custom-options::-webkit-scrollbar{display:none}.custom-options.open{display:block}.custom-option{border-bottom:1px solid #f1f1f1;cursor:pointer;font-size:14px;padding:10px;transition:background-color .3s ease}.custom-option:hover{background-color:#f1f1f1}.custom-option.selected{background-color:#0f0f0f;color:#fff;font-weight:600}.custom-search{position:sticky;top:0}.custom-select-search-input{align-items:center;background-color:#f8f9fa;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23343a40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");background-position:right 1rem center;background-repeat:no-repeat;background-size:20px 20px;border:none;border-bottom:1px solid #6c757d;box-shadow:inset 0 1px 2px rgba(0,0,0,.075);color:#323232;cursor:pointer;display:flex;font-size:1rem;font-weight:400;justify-content:space-between;padding:1rem;width:100%}.custom-select-search-input:focus{box-shadow:0 0 2px 4px rgba(58,43,159,.2);outline:none}.pagination-items{display:flex;justify-content:space-between}@media (max-width:767px){.pagination-items{justify-content:center!important}}.table-pagination .custom-select{background-color:#e9ecef;box-shadow:none;height:30px;min-height:30px;min-width:60px;outline:none;padding:0;width:60px}.table-pagination .custom-select:focus{box-shadow:none;outline:none}.table-pagination .custom-select__trigger{padding-left:0;padding-top:0}.table-pagination .custom-select-wrapper .custom-options{bottom:105%;top:auto}.pagination{align-items:center;background-color:#e9ecef;border-radius:20px;display:flex;justify-content:center;width:fit-content}.page-number,.pagination-button{align-items:center;cursor:pointer;display:flex;height:30px;justify-content:center;min-height:30px;min-width:28px;width:28px}.page-number{color:#0f0f0f;transition:all .2s ease-in}.page-number.active,.page-number.active:hover{background-color:#0f0f0f;color:#fff}.page-number:hover{background-color:#f8f9fa;color:#0f0f0f}.page-item{margin:0 5px}.page-item .page-link{border-radius:5px;color:#0f0f0f;cursor:pointer;padding:.5rem .75rem}.page-item .page-link:hover{background-color:#f8f9fa}.page-item .page-link.active{background-color:#0f0f0f;color:#fff}.page-item .page-link.disabled{color:#6c757d;cursor:not-allowed}.table-wrapper{-ms-overflow-style:none;flex-grow:1;height:calc(100vh - 29.613rem);margin-bottom:1.5rem;min-height:100%;overflow-x:auto;overflow-y:auto;overflow-y:scroll;position:relative;scrollbar-width:0;scrollbar-width:none;width:100%}.table-wrapper::-webkit-scrollbar{display:none}.svg-icon{fill:#fff}.table-wrapper.loading-active{overflow:hidden;pointer-events:none}table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}td,th{border-bottom:1px solid #ddd;padding:.5rem 1rem;vertical-align:middle}th{background-color:#0f0f0f;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:1rem;white-space:nowrap}th:first-child{border-radius:10px 0 0 10px}th:last-child{border-radius:0 10px 10px 0}th.sortable:hover{background-color:#e9ecef}tr{border-radius:10px;transition:background-color .3s ease}tr:hover{background-color:#ececec}.table-row{width:fit-content}.table-row.expanded{background-color:#ececec}.table-row td:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.table-row td:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.table-row.expanded td:first-child{border-bottom-left-radius:0!important}.table-row.expanded td:last-child{border-bottom-right-radius:0!important}.table-actions{text-align:center}.table-search--wrapper{position:relative}.table-search--container{align-items:center;display:flex;height:40px;position:relative;position:absolute;top:-18px;transition:width .3s ease;width:40px}.table-search--container.expanded{width:200px}.table-search--input{border:1px solid #ccc;border-radius:20px;height:40px!important;outline:none;padding:0 40px 0 10px;width:100%}.loading-overlay{align-items:center;display:flex;justify-content:center;left:50%;min-height:500px;overflow:hidden!important;position:relative;transform:translate(200%,-25%);width:100%;z-index:600}.detail-row{max-height:0;opacity:0;overflow:hidden;transition:all .5s}.detail-row.expanded{max-height:500px;opacity:1;transition:all .5s}.detail-content{border-radius:20px;padding:1rem}.search-icon{pointer-events:none;z-index:1}.svg-icon{height:1em;width:1em}.striped-row{border-bottom:1px solid #ccc}.form-check-input{margin-top:0}.position-relative{position:relative}.position-absolute{position:absolute}.top-25{top:25%}.top-50{top:50%}.gap-1{gap:.25rem}.custom-check-input{appearance:none;background-color:#fff;border:2px solid #ced4da;border-radius:5px;cursor:pointer;display:inline-block;height:18px;position:relative;top:5px;width:18px}.custom-check-input:checked{background-color:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;border-color:#ced4da}.custom-check-input:indeterminate{background-color:#000;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-width='3' stroke-linecap='round' d='M5 10h10'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain;border-color:#ced4da}.custom-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:contain}.no-records{align-items:center;color:#777;display:flex;font-size:16px;font-weight:700;height:100px;justify-content:center;text-align:center}.status-active{background-color:#dafddf;color:#00d620}.status-active,.status-passive{border-radius:20px;font-size:14px;font-weight:600;padding:6px 12px}.status-passive{background-color:#ffd9db;color:#ff000d}.status-pending{background-color:#fbffd8;border-radius:20px;color:#d9c700;font-size:14px;font-weight:600;padding:6px 12px}.table-detail-animate{animation:fadeInRow .25s ease-in-out}@keyframes fadeInRow{0%{height:0;opacity:0}to{height:auto;opacity:1}}.bg-transparent{background-color:transparent}.border-none{border:none}.p-0{padding:0}.m-0{margin:0}.gap-2{gap:.5rem}.gap-4{gap:1rem}.d-flex{display:flex}.justify-content-center{justify-content:center}.align-items-center{align-items:center}.flex-wrap{flex-wrap:wrap}.text-primary{color:#0f0f0f}.cursor-pointer{cursor:pointer}.loaderSpinner{animation:rotation 1s linear infinite;border:5px solid;border-color:#000 #000 transparent;border-radius:50%;box-sizing:border-box;display:inline-block;height:48px;min-height:48px;min-width:48px;width:48px}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}