text:
body
{
  font-family: Arial,Helvetica,sans-serif;
}

td, th
{
  vertical-align: top;
}

.topLevelCategoryContainer
{
  font-weight: bold;
  margin: 5px;
  color: #BD9C8C;
}

/* define table skin */
table.topLevelCategory {
margin: 0px;
margin-left: 25px;
padding: 0;
border-collapse: separate;
border-spacing: 0;
width: 100%;
border-style:solid;
border-width:1px;
}

table.topLevelCategory > colgroup > col.typeColumn
{
  width: 20em;
}

table.topLevelCategory > colgroup > col.idColumn
{
  width: auto;
}

/*
table.grid thead,
table.grid .collapsible
*/
table.topLevelCategory > thead > tr > th
{
background-color: #c7c3bb;
}

/* table.grid th */
table.topLevelCategory > thead > tr > th,
table.topLevelCategory > tbody > tr > th
{
color: #565770;
padding: 4px 16px 4px 0;
padding-left: 10px;
font-weight: bold;
text-align: left;
}

table.topLevelCategory td {
color: #565770;
padding: 4px 6px;
}

/*
table.topLevelCategory tr.even {
background-color: #EDEDE8;
}
*/

body {
/*font: 11px Arial, Helvetica, sans-serif;*/
/*font-size: 13px;*/
}
#wrapper {
margin: 0 auto;
width: 80%;
}
#header {
color: #333;
padding: 10px;
/*border: 2px solid #ccc;*/
margin: 10px 0px 5px 0px;
/*background: #BD9C8C;*/
}
#content {
width: 100%;
color: #333;
border: 2px solid #ccc;
background: #FFFFFF;
margin: 0px 0px 5px 0px;
padding: 10px;
/*font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;*/
font-size: 11px;
color: #039;
}

.stixHeader
{
font-weight:bold; margin:5px; color:#BD9C8C;
}

.stixHeader > table > tbody > tr:nth-child(even)
{
  background-color: lavender;
}

#hor-minimalist-a,
.hor-minimalist-a
{
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  font-size: 12px;
}
#hor-minimalist-a > thead > tr > th,
.hor-minimalist-a > thead > tr > th
{
  border-bottom: 2px solid #6678b1;
  text-align: left;
}
.one-column-emphasis
{
/*font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;*/
/*font-size: 12px;*/
margin: 0.1em 0em 0.1em 0em;
text-align: left;
/*border-collapse: collapse;*/
width: 100%;
border-spacing: 0;
}
.one-column-emphasis > tbody > tr > td
{
padding: 5px 10px;
color: #200;
}
.oce-first
{
background: #d0dafd;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.oce-first-obs
{
background: hsla(0,50%, 0%, 0.25);
/*border-right: 10px solid transparent;*/
border-right: 10px solid  black;
width: 20%;
}
.oce-first-obscomp-or
{
background: #E9EEF4;
border-right: 10px solid transparent;
}
.oce-first-obscomp-and
{
background: #F2F4E9;
border-right: 10px solid transparent;
}
.oce-first-inner
{
background: #EFF8F4;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.oce-first-inner-inner
{
background: #E5F4EE;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.oce-first-inner-inner-inner
{
background: #DBEFE6;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.oce-first-inner-inner-inner-inner
{
background: #D0EAE0;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.oce-first-inner-inner-inner-inner-inner
{
background: #B7D1C6;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
#container {
color: #333;
border: 1px solid #ccc;
background: #FFFFFF;
margin: 0px 0px 10px 0px;
padding: 10px;
}
/*
#section {
color: #333;
background: #FFFFFF;
margin: 0px 0px 5px 0px;
}
*/
#object_label_div div {
/*display: inline;*/
/*width: 30%;*/
}
#object_type_label {
width:200px;
background: #e8edff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 5px solid #ccc;
padding: 1px;
}
#defined_object_type_label {
width:400px;
background: #E9F3CF;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 1px;
}
#associated_object_label {
/*font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;*/
font-size: 12px;
margin-bottom: 2px;
}
.heading,
.eventTypeHeading
{
  margin-bottom: 0.5em;
  font-weight: bold;
}
.contents,
.eventDescription
{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.container
{
  margin-left: 1em;
  padding-left: 0.5em;
}

.contents.actionContents, .container.actionContainer {
  margin-left: 0;
  padding-left: 0;
}

.eventDescription,
.description
{
  font-style: italic!important;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.description::before
{
  font-weight: bold;
  content: "Description: "
}
.emailDiv
{
  display: block!important;
}
.relatedTarget
{
animation: targetHighlightAnimation 0.2s 10;
animation-direction: alternate;
-webkit-animation: targetHighlightAnimation 0.2s;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: 10;
}
@keyframes targetHighlightAnimation
{
0% {background: hsla(360, 100%, 50%, .3); }
100% {background: hsla(360, 100%, 50%, .7); }
}
@-webkit-keyframes targetHighlightAnimation
{
0% {background: hsla(360, 100%, 50%, .3); }
100% {background: hsla(360, 100%, 50%, .7); }
}

.highlightTargetLink
{
color: blue;
text-decoration: underline;
}

table.compositionTableOperator > tbody > tr > td
{
  padding: 0.5em;
}
table.compositionTableOperand > tbody > tr > td
{
  padding: 0;
}
table.compositionTableOperator > tbody > tr > td,
table.compositionTableOperand > tbody > tr > td
{
  /* border: solid gray thin; */
  /* border-collapse: collapse; */
  border: none;
  padding: 0.5em;
}
.compositionTable,
.compositionTableOperator,
.compositionTableOperand
{
  border-collapse: collapse;
  padding: 0!important;
  border: none;
}
td.compositionTable,
td.compositionTableOperator,
td.compositionTableOperand
{
  padding: 0!important;
  border: none;
}
.compositionTableOperand
{
  padding: 0.5em;
}
.compositionTableOperand > tbody > tr > td > div
{
  background-color: lightcyan;
  padding: 0.7em;
}

/* make DL look like a table */
dl.table-display
{
float: left;
width: 520px;
margin: 1em 0;
padding: 0;
border-bottom: 1px solid #999;
}

.table-display dt
{
clear: left;
float: left;
width: 200px;
margin: 0;
padding: 5px;
border-top: 1px solid #999;
font-weight: bold;
}

.table-display dd
{
float: left;
width: 300px;
margin: 0;
padding: 5px;
border-top: 1px solid #999;
}

.verbatim
{
  white-space: pre-line;
  margin-left: 1em;
}
table
{
  empty-cells: show;
}

.externalLinkWarning
{
  font-weight: bold;
  color: red;
}

.tlpred{
  font-weight: bold;
  background-color: red;
}
.tlpamber{
  font-weight: bold;
  background-color: gold;
}
.tlpgreen{
  font-weight: bold;
  background-color: limegreen;
}
.tlprwhite{
  font-weight: bold;
  background-color: white;
}

.inlineOrByReferenceLabel
{
  font-style: italic!important;
  color: lightgray;
}

.contents
{
  padding-left: 1em;
}
.cyboxPropertiesValue
{
  font-weight: normal;
}

.cyboxPropertiesConstraints
{
  font-weight: normal;
  font-style: italic!important;
  color: red;
}

.cyboxPropertiesConstraints .objectReference
{
  color: black;
}

.objectReference
{
  margin-left: 1em;
}

.expandableContainer.collapsed > .expandableToggle::before,
.expandableContainer.collapsed.expandableToggle::before,
tbody.expandableContainer.collapsed > tr > td > .expandableToggle::before
{
  content: "+";
}
.expandableContainer.expanded > .expandableToggle::before,
.expandableContainer.expanded.expandableToggle::before,
tbody.expandableContainer.expanded > tr > td > .expandableToggle::before
{
  content: "\2212"; /* that's the minus sign, which is the same width as + */
}
.expandableContainer > .expandableToggle::before,
.expandableContainer.expandableToggle::before,
.nonexpandableContainer::before,
tbody.expandableContainer > tr > td > .expandableToggle::before
{
  color: goldenrod;
  /*
  display: inline-block;
  width: 1em;
  */
}
.nonexpandableContainer::before
{
  content: "";
}

.expandableToggle
{
  cursor: pointer;
  padding-left: 1.0em;
  text-indent: -0.5em;
}

.expandAll
{
  cursor: pointer;
  text-decoration: underline;
  color: blue;
  margin-bottom: 1em;
}

.expandableContainer.expanded
{
  border-style: solid;
  border-color: hsl(0, 0%, 90%); /* very light gray */
  border-width: 1px;
}

.expandableContainer > .expandableContents,
tbody.expandableContainer > tr > td > .expandableContents
{

/*
background-color: gray;
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px 50px;
*/

  /*background-color: #A8CBDE;*/
  padding-top: 0.25em;
  padding-right: 1em;
  padding-left: 0.5em;
  padding-bottom: 0.5em;
}

.expandableSeparate.expandableContainer.collapsed > .expandableContents,
tbody.expandableSeparate.expandableContainer.collapsed > tr > td > .expandableContents
{
  display: none;
}

.longText
{
   width: 60em;
}
.expandableSame.expandableContainer.collapsed
{
  overflow: hidden;
  height: 1em;
}
.expandableSame.expandableContainer.expanded
{
    word-wrap: break-word;
}

.associatedObjectContents
{
    font-weight: normal;
}
.baseobj
{
}
.copyobj
{
}
.baseobserv
{
}
.copyobserv
{
}

.debug
{
  display: none;
  /*display: block;*/
}

.indicator-sub-table > colgroup > col.heading-column
{
  width: 15em;
}

.StixDescriptionValue
{
  white-space: pre-line;
}

.reference
{
  /*display: block;*/
  display: none;
}

.customHeader
{
  text-align: center;
  margin-bottom: 1em;
  background-color: silver;
}

.customFooter
{
  margin-top: 1em;
  text-align: right;
}

.itemCategoryIcon
{
  padding: 0.5em;
  text-align: left;

  width: 100px;
  height: 100px;

  display: inline-block;

  /*
  border-style: solid;
  border-color: red;
  border-width: 1px;
  padding: 5px;
  */
}

.documentContentsList
{
}
.documentContentsItem
{
  display: inline;
}


text:
<?php

/**
 * This script loads data from the database and returns it to the js
 *
 */

require_once('config.php');
require_once('EditableGrid.php');

/**
 * fetch_pairs is a simple method that transforms a mysqli_result object in an array.
 * It will be used to generate possible values for some columns.
*/
function fetch_pairs($mysqli,$query){
	if (!($res = $mysqli->query($query)))return FALSE;
	$rows = array();
	while ($row = $res->fetch_assoc()) {
		$first = true;
		$key = $value = null;
		foreach ($row as $val) {
			if ($first) { $key = $val; $first = false; }
			else { $value = $val; break; }
		}
		$rows[$key] = $value;
	}
	return $rows;
}

// Database connection
$mysqli = mysqli_init();
$mysqli->options(MYSQLI_OPT_CONNECT_TIMEOUT, 5);
$mysqli->real_connect($config['db_host'],$config['db_user'],$config['db_password'],$config['db_name']);

// create a new EditableGrid object
$grid = new EditableGrid();

/*
*  Add columns. The first argument of addColumn is the name of the field in the databse.
*  The second argument is the label that will be displayed in the header
*/
$grid->addColumn('id', 'ID', 'integer', NULL, false);
$grid->addColumn('name', 'Name', 'string');
$grid->addColumn('firstname', 'Firstname', 'string');
$grid->addColumn('age', 'Age', 'integer');
$grid->addColumn('height', 'Height', 'float');
/* The column id_country and id_continent will show a list of all available countries and continents. So, we select all rows from the tables */
$grid->addColumn('id_continent', 'Continent', 'string' , fetch_pairs($mysqli,'SELECT id, name FROM continent'),true);
$grid->addColumn('id_country', 'Country', 'string', fetch_pairs($mysqli,'SELECT id, name FROM country'),true );
$grid->addColumn('email', 'Email', 'email');
$grid->addColumn('freelance', 'Freelance', 'boolean');
$grid->addColumn('lastvisit', 'Lastvisit', 'date');
$grid->addColumn('website', 'Website', 'string');
$grid->addColumn('action', 'Action', 'html', NULL, false, 'id');

$mydb_tablename = (isset($_GET['db_tablename'])) ? stripslashes($_GET['db_tablename']) : 'demo';

error_log(print_r($_GET,true));

$query = 'SELECT *, date_format(lastvisit, "%d/%m/%Y") as lastvisit FROM '.$mydb_tablename ;
$queryCount = 'SELECT count(id) as nb FROM '.$mydb_tablename;

$totalUnfiltered =$mysqli->query($queryCount)->fetch_row()[0];
$total = $totalUnfiltered;

/* SERVER SIDE */
/* If you have set serverSide : true in your Javascript code, $_GET contains 3 additionnal parameters : page, filter, sort
 * this parameters allow you to adapt your query
 *
 */
$page=0;
if ( isset($_GET['page']) && is_numeric($_GET['page'])  )
  $page =  (int) $_GET['page'];

$rowByPage=50;

$from= ($page-1) * $rowByPage;

if ( isset($_GET['filter']) && $_GET['filter'] != "" ) {
  $filter =  $_GET['filter'];
  $query .= '  WHERE name like "%'.$filter.'%" OR firstname like "%'.$filter.'%"';
  $queryCount .= '  WHERE name like "%'.$filter.'%" OR firstname like "%'.$filter.'%"';
  $total =$mysqli->query($queryCount)->fetch_row()[0];
}

if ( isset($_GET['sort']) && $_GET['sort'] != "" )
  $query .= " ORDER BY " . $_GET['sort'] . (  $_GET['asc'] == "0" ? " DESC " : "" );

$query .= " LIMIT ". $from. ", ". $rowByPage;

error_log("pageCount = " . ceil($total/$rowByPage));
error_log("total = " .$total);
error_log("totalUnfiltered = " .$totalUnfiltered);

$grid->setPaginator(ceil($total/$rowByPage), (int) $total, (int) $totalUnfiltered, null);

/* END SERVER SIDE */

error_log($query);

$result = $mysqli->query($query );

$mysqli->close();

// send data to the browser

$grid->renderJSON($result,false, false, !isset($_GET['data_only']));

redpajama_set_name: RedPajamaGithub


text:
import React from 'react'
import { Button, ButtonGroup } from '@blueprintjs/core'

import { TestContext } from 'test-ui/core/UiTester'

export type ParameterSpec<Key extends string> = { [k in Key]: { label: string, defaultValue?: boolean } }
export type ParameterValues<Key extends string> = { [k in Key]: boolean }

export interface Props<ParameterKey extends string> {
    testWrapperStyle?: any
    forceRedrawOnChange?: boolean
    context: TestContext
    parameterSpec: ParameterSpec<ParameterKey>
    renderTest(context: TestContext, params: ParameterValues<ParameterKey>): JSX.Element
}

interface State {
    prevRenderTest?: Function
    forceRedraw: boolean
}

export default class ParameterTestDecorator<ParameterKey extends string> extends React.Component<Props<ParameterKey>, State> {

    static getDerivedStateFromProps(nextProps: Props<string>, prevState: State): Partial<State> | null {
        if (nextProps.renderTest !== prevState.prevRenderTest && nextProps.forceRedrawOnChange !== false) {
            return { prevRenderTest: nextProps.renderTest, forceRedraw: true }
        }
        return null
    }

    constructor(props: Props<ParameterKey>) {
        super(props)
        this.state = { forceRedraw: false }
    }

    private getParameterValues(): ParameterValues<ParameterKey> {
        const { context, parameterSpec } = this.props
        const paramKeys = Object.keys(parameterSpec) as ParameterKey[]

        let params: ParameterValues<ParameterKey> | undefined = context.state.params
        if (!params) {
            params = {} as ParameterValues<ParameterKey>
            for (const key of paramKeys) {
                params[key] = parameterSpec[key].defaultValue || false
            }
            context.state.params = params
        }
        return params
    }

    render() {
        const { props, state } = this
        const { parameterSpec } = props

        const paramKeys = Object.keys(parameterSpec) as ParameterKey[]
        const params = this.getParameterValues()

        if (this.state.forceRedraw) {
            this.setState({ forceRedraw: false })
        }

        return (

                    {!state.forceRedraw && props.renderTest(props.context, params)}

                <ButtonGroup
                    style={{ display: 'inline-block', verticalAlign: 'top', marginLeft: 50 }}
                    vertical={true}
                >
                    {paramKeys.map(key =>
                        <Button
                            key={key}
                            active={params[key]}
                            text={parameterSpec[key].label}
                            onClick={() => {
                                params[key] = !params[key]
                                props.context.forceUpdate()
                            }}
                        />
                    )}
                </ButtonGroup>

        )
    }

}