UNPKG

@deepbag/react-grid-x

Version:

ReactGridX is a customizable and flexible React table component that supports pagination, dynamic rendering of table data, and customizable column rendering. It provides an easy-to-use interface for displaying tabular data with configurable columns, pagin

1 lines 3.42 kB
.rgx-theme{width:100%}.rgx-theme .rgx-table-container{position:relative;overflow-x:auto;max-width:100%;border:1px solid #ddd}.rgx-theme .rgx-table-container::-webkit-scrollbar{width:3px;height:3px}.rgx-theme .rgx-table-container::-webkit-scrollbar-thumb{background-color:rgba(158,154,154,.3);border-radius:3px}.rgx-theme .rgx-table-container::-webkit-scrollbar-thumb:hover{background-color:rgba(44,34,34,.5)}.rgx-theme .rgx-table-container-loading{position:relative}.rgx-theme .rgx-table{min-width:1000px;border-collapse:collapse;overflow-x:scroll!important}.rgx-theme .rgx-table-tobody-loading{filter:blur(.8px);pointer-events:none}.rgx-theme .rgx-table-head-th,.rgx-theme .rgx-table-head-th-checkbox{padding:10px;text-align:left;font-size:14px}.rgx-theme .rgx-table-body-td,.rgx-theme .rgx-table-body-td-checkbox{padding:4px 10px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;text-align:left;font-size:14px}.rgx-theme .rgx-table-body-tr:nth-child(2n){background-color:#f2f2f2}.rgx-theme .rgx-table-body-tr:nth-child(odd){background-color:#ececec}.rgx-theme .rgx-table-body-tr{cursor:pointer}.rgx-theme .rgx-table-body-tr:hover{background-color:#ebf0f6}.rgx-theme .rgx-table-head{position:sticky;top:0;z-index:1;background-color:#ebf0f6;cursor:default}.rgx-theme .rgx-table-body-tr-expanded{background-color:#f9f9f9;transition:background-color .3s ease}.rgx-theme .rgx-table-expanded-row-tr{background-color:#f9f9f9;padding-left:20px}.rgx-theme .rgx-table-expanded-row-tr .rgx-table-expanded-row-td{padding:20px;border-top:0}.rgx-theme .rgx-table-expanded-arrow{cursor:pointer;margin-right:10px;text-align:center}.rgx-theme .rgx-table-expanded-row-td{padding:20px}.rgx-theme .rgx-table-expanded-arrow-icon{font-size:14px}.rgx-theme .rgx-table-popup-items{font-weight:400;padding:4px 8px;font-size:14px;border-radius:5px;cursor:pointer;display:flex}.rgx-theme .rgx-table-popup-items:hover{background-color:#ededed}.rgx-theme .rgx-table-head-th-checkbox input[type=checkbox]{width:17px;height:17px;cursor:pointer;margin:0;transition:background-color .2s ease;margin-bottom:-2px}.rgx-theme .rgx-table-body-td-checkbox input[type=checkbox]{width:17px;height:17px;cursor:pointer;margin:0;transition:background-color .2s ease;margin-bottom:-2px}.rgx-theme .rgx-table-body-td-checkbox input[type=checkbox]:checked,.rgx-theme .rgx-table-head-th-checkbox input[type=checkbox]:checked{background-color:#4caf50;border-color:#4caf50;margin-bottom:-2px}.rgx-theme .rgx-table-body-td-checkbox input[type=checkbox]:hover,.rgx-theme .rgx-table-head-th-checkbox input[type=checkbox]:hover{background-color:#4caf4f55}.rgx-theme .rgx-table-body-td-checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #ddd;border-radius:3px;position:relative;width:17px;height:17px}.rgx-theme .rgx-table-head-th-checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #ddd;border-radius:3px;position:relative;width:17px;height:17px}.rgx-theme .rgx-table-body-td-checkbox input[type=checkbox]:checked,.rgx-theme .rgx-table-head-th-checkbox input[type=checkbox]:checked{background-color:#4caf50}.rgx-theme .rgx-table-body-td-checkbox input[type=checkbox]:checked::before,.rgx-theme .rgx-table-head-th-checkbox input[type=checkbox]:checked::before{content:"✔";position:absolute;top:0;left:3px;color:#fff;font-size:12px;line-height:16px}