Exciting news! We've launched the Early Access phase for the latest addition to the Keep Coding Family: DataDen – the ultimate plugin that enhances your projects with a powerful table component.

But why should you join Early Access? Firstly, DataDen already boasts a comprehensive set of features essential for efficient data management in your projects. Secondly, we envision DataDen as a product in its early stages, with a commitment to systematically introducing new features to ensure it remains unparalleled. By joining DataDen now in Early Access, you lock in an incredibly competitive price, regardless of the additional features we'll integrate in the near future.

Moreover, DataDen is designed with you in mind. Your feedback during Early Access will directly shape its development, ensuring that your project's unique requirements are met. So, seize the opportunity to join Early Access and collaborate with us in crafting the ultimate customizable Data Grid!

Advanced data structure

The latest and most advanced data structure allows customizing each column (sort, width, resize, field) and matches values from each row to a column in which the field equals a given key value.

CSS Variables

Below you will find a list of CSS variables that we use in the Data Grid.

.data-den-grid {
  --#{$prefix}grid-font-family: Roboto, sans-serif;
  --#{$prefix}grid-font-size: 14px;

  --#{$prefix}grid-border-width: 1px;
  --#{$prefix}grid-border-color: #e5e7eb;
  --#{$prefix}grid-border: solid var(--#{$prefix}grid-border-width) var(--#{$prefix}grid-border-color);
  --#{$prefix}grid-border-radius: 0.25rem;

  --#{$prefix}grid-row-cell-border: solid var(--#{$prefix}row-cell-border-width) var(--#{$prefix}cell-border-color);

  --#{$prefix}cell-active-bg: #fafafa;
  --#{$prefix}cell-padding-x: 12px;
  --#{$prefix}cell-border-width: var(--#{$prefix}grid-border-width);
  --#{$prefix}cell-border-color: var(--#{$prefix}grid-border-color);
  --#{$prefix}cell-border: solid var(--#{$prefix}cell-border-width) var(--#{$prefix}cell-border-color);

  --#{$prefix}cell-pinned-border-color: #636363;
  --#{$prefix}cell-pinned-border: solid 1px var(--#{$prefix}cell-pinned-border-color);

  --#{$prefix}row-cell-bg: #ffffff;
  --#{$prefix}row-cell-active-bg: var(--#{$prefix}cell-active-bg);
  --#{$prefix}row-cell-border-width: var(--#{$prefix}grid-border-width);
  --#{$prefix}row-cell-border-color: var(--#{$prefix}grid-border-color);
  --#{$prefix}row-cell-border: solid var(--#{$prefix}row-cell-border-width) var(--#{$prefix}row-cell-border-color);
  --#{$prefix}row-cell-padding-x: var(--#{$prefix}cell-padding-x);

  --#{$prefix}pagination-content-margin: 10px 10px 10px 0;
  --#{$prefix}pagination-info-margin: 0 0.5rem;
  --#{$prefix}pagination-button-border: none;
  --#{$prefix}pagination-button-border-radius: 0.25rem;
  --#{$prefix}pagination-button-bg: #ffffff;
  --#{$prefix}pagination-button-padding: 7px;

  --#{$prefix}header-cell-border: var(--#{$prefix}grid-border);
  --#{$prefix}header-cell-font-weight: 500;
  --#{$prefix}header-cell-bg: #fafafa;
  --#{$prefix}header-cell-active-bg: var(--#{$prefix}cell-active-bg);
  --#{$prefix}header-cell-padding: 6px 20px 6px 12px;

  --#{$prefix}header-sorter-margin-left: 5px;
  --#{$prefix}header-sorter-arrow-sorted-color: unset;
  --#{$prefix}header-sorter-arrow-unsorted-color: #a9a9a9;
  --#{$prefix}header-sorter-asc-transform: rotate(0deg);
  --#{$prefix}header-sorter-desc-transform: rotate(180deg);
  --#{$prefix}header-sorter-index-font-size: 0.75rem;

  --#{$prefix}header-filter-input-margin: 8px 0 0 0;
  --#{$prefix}header-filter-input-border-color: var(--#{$prefix}grid-border-color);
  --#{$prefix}header-filter-input-border: 1px solid var(--#{$prefix}header-filter-input-border-color);
  --#{$prefix}header-filter-input-border-radius: 0.25rem;
  --#{$prefix}header-filter-input-padding: 0 4px;
  --#{$prefix}header-filter-input-height: 20px;
  --#{$prefix}header-filter-input-width: 100%;
  --#{$prefix}header-filter-input-bg: transparent;

  --#{$prefix}header-resizer-bg: #ccc;
  --#{$prefix}header-resizer-width: 2px;
  --#{$prefix}header-resizer-padding-right: 6px;

  --#{$prefix}header-menu-bg: #ffffff;
  --#{$prefix}header-menu-border: var(--#{$prefix}grid-border);
  --#{$prefix}header-menu-right: 36px;
  --#{$prefix}header-menu-top: 10px;
  --#{$prefix}header-menu-width: 150px;
  --#{$prefix}header-menu-max-height: 200px;
  --#{$prefix}header-menu-box-shadow: 0 2px 4px #00000033;
  --#{$prefix}header-menu-padding: 8px;
  --#{$prefix}header-menu-font-size: 12px;
  --#{$prefix}header-menu-border-radius: 4px;

  --#{$prefix}header-menu-item-color: #333;
  --#{$prefix}header-menu-item-hover-bg: #eee;
  --#{$prefix}header-menu-item-padding: 4px 8px;

  --#{$prefix}header-menu-toggler-icon-color: unset;
}

Draggable columns

Experience seamless interactivity with our draggable columns feature. Effortlessly rearrange your data grid to suit your workflow, ensuring optimal organization and efficiency. Just click, drag, and drop to customize your data display exactly as you need.

Pagination

Explore efficient data navigation with our pagination example. Learn to seamlessly handle large datasets by integrating simple, intuitive pagination controls.

Column search

Discover the power of quick data retrieval with our search column feature. Easily locate the information you need within your DataDen grids for a more streamlined and productive data management experience.

Multi sort

It is possible to sort data by multiple columns. To activate multi sort hold the Shift key while clicking the column header. You can change the default multi sort key to Ctrl by using the following option: multiSortKey: 'ctrl'

Cell formatting

Enhance your data grid with our versatile cell formatting options. Tailor each cell's appearance for clarity and impact, using colours, fonts, and styles that make your data speak volumes. Perfect for highlighting critical insights and personalizing your data view

Column Pinning

Column Pinning allows you to pin a column to the left or right side of the grid. It is possible to pin multiple columns at once.

Header filters

Header filters allows you to apply filtering for the data of a specific column. It is possible to apply multiple header filters at once.

Quick filter

Quick Filter allows you to filter data by multiple columns. It can be used in addition to Header Filters, the data will be displayed if it passes all conditions.

Compact version

Unlock the full potential of your data grid with advanced CSS customization. Style every aspect to match your brand or personal preference, from colours and fonts to layouts. Create a visually cohesive and highly functional data interface with ease.

So don’t hesitate to join DataDen’s Early Access: Secure your front-row seats to the future of data management. Learn more.

Also, more on YT