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

222 lines (191 loc) 6.64 kB
/* Table theme styles, including table structure, borders, and font styling. */ .rgx-theme { width: 100%; } /* Container for the table with relative positioning and horizontal scroll support. */ .rgx-theme .rgx-table-container { position: relative; overflow-x: auto; max-width: 100%; border: 1px solid #ddd; } /* Styling for the scrollbar inside the table container, making it slimmer. */ .rgx-theme .rgx-table-container::-webkit-scrollbar { width: 3px; height: 3px; } /* Styling for the scrollbar thumb (draggable part), with a light transparent color. */ .rgx-theme .rgx-table-container::-webkit-scrollbar-thumb { background-color: rgba(158, 154, 154, 0.3); border-radius: 3px; } /* Hover effect for scrollbar thumb, darkening the background. */ .rgx-theme .rgx-table-container::-webkit-scrollbar-thumb:hover { background-color: rgba(44, 34, 34, 0.5); } /* Loader effect for the table while loading, applies blur and disables pointer events. */ .rgx-theme .rgx-table-container-loading { position: relative; } /* Basic table structure with a fixed minimum width for large data sets. */ .rgx-theme .rgx-table { min-width: 1000px; border-collapse: collapse; overflow-x: scroll !important; } /* Blurring effect for table body cells while loading, disables interaction. */ .rgx-theme .rgx-table-tobody-loading { filter: blur(0.8px); pointer-events: none; } /* Styling for table headers (th) and table data cells (td) with padding, borders, and font size. */ .rgx-theme .rgx-table-head-th, .rgx-theme .rgx-table-head-th-checkbox { padding: 10px; text-align: left; font-size: 14px; } /* Styling for table body data cells (td) with padding, borders, and font size. */ .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; } /* Alternating row background colors for even rows (light gray). */ .rgx-theme .rgx-table-body-tr:nth-child(even) { background-color: #f2f2f2; } /* Alternating row background colors for odd rows (lighter gray). */ .rgx-theme .rgx-table-body-tr:nth-child(odd) { background-color: #ffffff; } /* Changes the cursor to a pointer for rows, indicating interactivity. */ .rgx-theme .rgx-table-body-tr { cursor: pointer; height: "45px"; } /* Hover effect on rows, darkening the background for better user interaction feedback. */ .rgx-theme .rgx-table-body-tr:hover { background-color: #ebf0f6; } /* Sticky table header with light background color and default cursor style. */ .rgx-theme .rgx-table-head { position: sticky; top: 0; z-index: 1; background-color: #f8f8f8; cursor: default; } /* Styling for expanded rows, with smooth background transition on hover. */ .rgx-theme .rgx-table-body-tr-expanded { background-color: #f9f9f9; transition: background-color 0.3s ease; } /* Expanding row with additional left padding for content clarity. */ .rgx-theme .rgx-table-expanded-row-tr { background-color: #f9f9f9; padding-left: 20px; } /* Expanded row cells with additional padding and no top border. */ .rgx-theme .rgx-table-expanded-row-tr .rgx-table-expanded-row-td { padding: 20px; border-top: 0; } /* Styling for expanded row arrows, aligning them next to text for better UX. */ .rgx-theme .rgx-table-expanded-arrow { cursor: pointer; margin-right: 10px; text-align: center; } /* Additional padding for table data cells in expanded rows for better spacing. */ .rgx-theme .rgx-table-expanded-row-td { padding: 20px; } /* Font size for expanded row arrows to make them consistent with table content. */ .rgx-theme .rgx-table-expanded-arrow-icon { font-size: 14px; } /* Styling for table popup items (like options or actions) with font and padding. */ .rgx-theme .rgx-table-popup-items { font-weight: 400; padding: 4px 8px; font-size: 14px; border-radius: 5px; cursor: pointer; display: flex; } /* Hover effect on popup items, changing the background to light gray for better visibility. */ .rgx-theme .rgx-table-popup-items:hover { background-color: #ededed; } /* Styling for checkboxes in the header cell with a fixed size and cursor. */ .rgx-theme .rgx-table-head-th-checkbox input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; margin: 0; transition: background-color 0.2s ease; margin-bottom: -2px; } /* Styling for checkboxes in the table body cells, consistent with header checkboxes. */ .rgx-theme .rgx-table-body-td-checkbox input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; margin: 0; transition: background-color 0.2s ease; margin-bottom: -2px; } /* Checked state for checkboxes, turning the background to green. */ .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; } /* Hover effect for checkboxes, with a light green background when hovered. */ .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; } /* Custom checkbox appearance with no default styles for more control over look. */ .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; } /* Custom checkbox appearance for header checkboxes. */ .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; } /* Green background when a checkbox is checked. */ .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; } /* Checkmark inside checked checkbox styled for clarity. */ .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: white; font-size: 12px; line-height: 16px; }