January 23, 2025

Note
 This blog is regarding a control available in my Nice toolkit, which is a paid add-on for EWB.

I was impressed with the datatables feature for JavaScript, but wanted to avoid linking in additional JavaScript modules which can sometimes change over time.

So I decided to implement a similar functionality in pure EWB.

What it is…​

TDataTables is a replacement for TGrid, but with a few differences. The original TGrid scrolls to the right when you run out of space. TDataTables uses a drop down to show additional details…​ all remaining fields, and also allows you to add user-defined buttons.

sample 1 sample 2

It also offers a built-in search capability which instantly prunes the visible list to just matching fields.

Sample Implementation

Look at Samples and click on the NiceDataTable button on the bottom left.

Programming for it

Start by creating TDataSet and TGrid.

I also made a few buttons with OnClick routines. Those buttons disappear from the form and are placed into each field’s details area.

I also added a TEdit to search the various fields.

unit datatablexample;

interface

uses WebCore, WebUI, WebForms, WebCtrls, WebData, WebGrids, WebCtnrs, WebLabels,
     niceexception, nicedatatable, WebBtns, WebEdits;

type
   TFormDataTableExample = class(TForm)
      DataSet1: TDataSet;
      Grid1: TGrid;
      GridColumn1: TGridColumn;
      GridColumn2: TGridColumn;
      GridColumn3: TGridColumn;
      GridColumn4: TGridColumn;
      btEdit: TButton;
      btDelete: TButton;
      MultiLineEdit1: TMultiLineEdit;
      btClose: TButton;
      Label1: TLabel;
      edSearch: TEdit;
      btCloseSample: TButton;
      procedure FormDataTableExampleShow(Sender: TObject);
      procedure btEditClick(Sender: TObject);
      procedure btDeleteClick(Sender: TObject);
      procedure btCloseClick(Sender: TObject);
      procedure edSearchChange(Sender: TObject);
      procedure btCloseSampleClick(Sender: TObject);
   private
      { Private declarations }
      dt : TDataTable;  // THIS IS IMPORTANT
   public
      { Public declarations }
   end;

var
   FormDataTableExample: TFormDataTableExample;

implementation

procedure TFormDataTableExample.FormDataTableExampleShow(Sender: TObject);
begin
   database.AutoTransactions := False;

   dataset1.Open;
   dataset1.Loadrows('{"rows":[{"name":"erick","address":"200 University Ave.","gender":"Male","age":20},'+
                    '{"name":"rosie","address":"147 Stoke Dr.","gender":"Female","age":20},'+
                    '{"name":"steve","address":"147 Stoke Dr.","gender":"Male","age":20},'+
                    '{"name":"thomas","address":"147 Stoke Dr.","age":20},'+
                    '{"name":"dirk","address":"147 Stoke Dr.","gender":"Male","age":20},'+
                    '{"name":"ronny","address":"147 Stoke Dr.","gender":"Male","age":20},'+
                    '{"name":"rosie","address":"147 Stoke Dr.","age":20},'+
                    '{"name":"rosie","address":"147 Stoke Dr.","age":20},'+
                    '{"name":"rosie","address":"147 Stoke Dr.","age":20},'+
                    '{"name":"rosie","address":"147 Stoke Dr.","age":20}'+
                    ']}');

   SetupNiceExceptionHandling;

   // assert the new datatable over the old TGrid it replaces
   dt := TDataTable.Create( grid1 , [ btEdit, btDelete, btClose ]);
   // if you didn't want any buttons, use:
   // dt := TDataTable.Create( grid1 , [ ] );

end;


procedure TFormDataTableExample.btEditClick(Sender: TObject);
begin
   dataset1.Open;
   Showmessage('Would edit ' + dataset1.COlumns.Column['name'].asstring );
   dataset1.Update;
   dataset1.Columns.Column['Name'].asString := 'Mabel';
   dataset1.Columns.Column['Age'].asinteger := 90;
   dataset1.Save;
   // update the display following the save
   dt.UpdateTable;
end;

procedure TFormDataTableExample.btDeleteClick(Sender: TObject);
begin
   Showmessage('Would delete ' + dataset1.COlumns.Column['name'].asstring );
   // tell the library first so it can record the rowid
   dt.deleterow( dataset1.rowid );
   // now delete the record
   dataset1.delete;

end;

procedure TFormDataTableExample.btCloseClick(Sender: TObject);
begin
  dt.CLoseFocus( dt.currentrowid );
end;

procedure TFormDataTableExample.edSearchChange(Sender: TObject);
begin
   if assigned( dt ) then
      dt.Search( edSearch.Text );
end;

procedure TFormDataTableExample.btCloseSampleClick(Sender: TObject);
begin
  Close;
end;

end.