jQuery datagridview styling - maikelbos0/VDT GitHub Wiki

The datagridview only provides very basic styling in the provided style sheet jquery-datagridview.style.css; you can use this as a template to create your own style. The various css classes the data grid uses are:

  • .datagridview is the original element and the main container of the datagridview
  • .datagridview-content-container is the scroll container for the header and body
  • .datagridview-header is the container for the header cells
  • .datagridview-header-cell are the individual column headers within the header
  • .datagridview-header-cell-sortable are only the sortable column headers
  • .datagridview-header-cell-sorted is the header cell that's currently sorted
  • .datagridview-header-drag are the elements to hold to drag to change column size
  • .datagridview-header-move-title element contains the header title of the header that's being dragged to move a column and is attached to the mouse position
  • .datagridview-header-move-indicator is the arrow pointing at the new column position while dragging a header to move a column
  • .datagridview-sort-toggle is the element displaying the current sort order if applicable
  • .datagridview-sort-toggle-ascending gets added to the sort toggle when sorting ascending
  • .datagridview-sort-toggle-descending gets added to the sort toggle when sorting descending
  • .datagridview-body is the container for the grid rows
  • .datagridview-row are the data rows inside the body that contain the data
  • .datagridview-row-selecting gets added to rows when a user is selecting (with mouse down)
  • .datagridview-row-selected gets added to rows that are currently selected
  • .datagridview-row > div can be used to access cells in the data rows
  • .datagridview-cell-sorted are the cells in the column that's currently sorted
  • .datagridview-total-row is the totals row inside the body
  • .datagridview-footer is the container for the footer (paging) elements
  • .datagridview-footer-element are the containers for each separate footer (paging) plugin