GitLab

<div src="formhandler" class="formhanlder">

<script>
$('.formhandler').formhandler({
// - `columns`: comma-separated column names to display, or a list of objects with these keys:
//     - `name`: column name
//     - `title`: display name of the column. Defaults to the same value as `name`
//     - `type`: `text` (default) / `number` / 'date'. Determines filters to be used
//     - `format`: string / function. Functions are applied to the value and the return value is used. Strings are treated as:
//         - a numeral.js format for number (numeral.js must be loaded by the developer)
//         - a moment.js format for date (moment.js must be loaded by the developer)
//     - `sort`: `true` / `false` / operators dict with:
//       - `{'': 'Sort ascending', '-': 'Sort descending'}` (default)
//     - `filters`: `true` (default) / `false` / operators dict with:
//       - `{'', 'Equals...', '!', 'Does not equal...', ...}`.
//         The default list of operators is based on the auto-detected type of the column.
//     - `unique`: TODO: {dict of query parameter and display value} or [list of values] or function?
//     - `hideable`: `true` (default) / `false`
  columns: [
    {name: 'ID', title: '#', type: 'text', sort: true, filters: true, hideable: true},
    {name: 'c1', title: 'Red', type: 'number', sort: true, filters: true, hideable: true},
    {
      name: 'Name',
      title: 'Name',
      format: 'text',
      sort: {
        '': 'Sort alphabetically',                // Only allow sort ascending
      },
      filters: {
        '': 'Equals...',
        '!': 'Does not equal...',
        '~': 'Contains...',
        '!~': 'Does not contain...'
      },
      hideable: false                             // Cannot hide this column from the UI
    }
  ],
  {
    name: 'Symbols',
    type: 'text',
    format: function(val) { return val === null ? '' : val }  // Disallow NaN
  },
  {
    name: 'c8',
    type: 'number',
    format: '0,0.0'         // Interpreted as a numeraljs format
  }
})

Note: When the operators are clicked, a dialog box should pop up like at https://learn.gramener.com/guide/formhandler/flags?_format=table

Use a template for this - just like the other components.